Html 将div放置在元件下方，位置固定，高度为100%

我有两个分区：

#lookbooksheader

和

#introContent

#lookbookHeader

中有一个视频，其中有

位置：fixed

，

高度：100%

和

高度：auto

，我是从中跟踪的。我希望

#introContent

位于

#lookbooksheader

下方，无论高度如何，如图所示。我正在尝试创建一个页面，当页面加载时，视频是完整的视口，您可以向下滚动查看下面的其他内容

我尝试了这两种元素的定位、浮动和显示的每一种组合，试图让它发挥作用，但我就是做不到！目前，

#lookbookHeader

没有样式，因为我对它应用什么似乎无关紧要，因为当我应用position fixed时，视频样式会覆盖它。如果我没有固定的视频，那么它的缩放或大小与宽度/高度不正确。我错过了什么

我知道我可以使用jQuery或JavaScript在页面加载时获取

#lookbooksheader

的高度，但我想知道是否有一种方法可以仅使用CSS来实现这一点。你可以看到这一页

我已经检查了其他的帖子，但是所有的帖子似乎都引用了一个固定的元素和一个固定的高度，这里的情况并非如此

HTML

            <div id="lookbookHeader">
                <video autoplay poster="http://lcoawebservices.com/assets/lp_stainless_SliderStop_5.jpg" id="bgvid">
                    <source src="http://lcoawebservices.com/assets/lp_stainless_Transition_5.webm" type="video/webm">
                    <source src="http://lcoawebservices.com/assets/lp_stainless_Transition_5.mp4" type="video/mp4">
                </video>
                <div id="headerContentContainer">
                    <h1>Lookbook: Spring 2015</h1>
                    <div class="initial-arrow-small"></div>
                </div>
            </div>
        </div>
        <div id="introContent">
            <h2>Bienvenue</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <div class="block red">one</div>    
            <div class="block blue">two</div>   
            <div class="block yellow">three</div>   
            <div class="block green">four</div> 
        </div>

---

添加顶部

边距

以完成此操作。首先，您需要在

body

样式中包含

html

：

html,body { //add html
  width: 100%;
  height: 100%;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  margin: 0;
  padding: 0;
}

然后将

高度：100%

添加到

.container

（用于其子容器）。然后您可以在

.introContent

上设置高度和边距。此外，您在

.introContent

中还浮动了未清除的元素。您可以通过添加

溢出：隐藏
：

#introContent {
  min-height: 100%; //add min-height
  max-width: 100%;
  height: auto;
  background-color: red; //changed so you can see the container better
  overflow: hidden; //add to clear floats
  margin: 50% 0 0; //add margin from top
}


更新
我有一个更好的解决办法。有时候你只是想得太多了。只需在内容上方添加一个空白的
div
，如下所示：

<div class="spacer"></div>
<div id="introContent">
   ....

这将占据屏幕的高度，并将您的内容向下移动

据我所知，CSS没有什么问题。当我扩展您的内容以使页面可滚动时，它的行为与示例网站相同。视频在后台播放，滚动只会将内容放在视频顶部。检查这个JSFIDLE：我应该更清楚-当页面最初加载时，我希望当前位于视频顶部的所有内容都位于视频下方，除了Lookbook 2015副本和箭头。我正在尝试做缅因啤酒网站上面链接的事情；页面加载时，Synoposis内容位于视频下方。谢谢！两种解决方案都奏效了。我真的很感谢你的帮助和解释。不客气。很乐意帮忙。用第二个，它会更可靠
<div class="spacer"></div>
<div id="introContent">
   ....

.spacer{
   height: 100%;
   width: 100%;
}