将 div 放置在固定位置和 100% 高度的元素下方

Question

我有两个 div：#lookbookHeader 和 #introContent。 #lookbookHeader 中有 position: fixed、height: 100% 和 height: auto 的视频，我是从 this tutorial. I would like #introContent to be below #lookbookHeader, regardless of the height, as you see on this page 关注的。我正在尝试创建一个页面，当页面加载时视频是完整的视口，您可以向下滚动以查看下面的其他内容。

我尝试了这两个元素上的定位、浮动和显示的所有组合，试图让它工作，但我就是做不到！目前 #lookbookHeader 没有样式，因为我对其应用什么似乎并不重要，因为当我应用固定位置时视频样式会覆盖它。如果我没有修复视频，那么它就无法使用 width/height 正确缩放或调整大小。我错过了什么？

我知道我可以使用 jQuery 或 JavaScript 在页面加载时获得 #lookbookHeader 的高度，但想知道是否有办法使用 CSS 只要。可以看到页面here.

我查看了 SO 上的其他帖子，such as this one，但所有帖子似乎都引用了具有设定高度的固定元素，而此处并非如此。

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>

CSS

    #introContent {
      max-width: 100%;
      height: auto;
      background-color: #fff;
    }
    #lookbookHeader video#bgvid {
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      background: url(http://lcoawebservices.com/assets/lp_stainless_SliderStop_5.jpg) no-repeat;
      background-size: cover;
      display: block;
    }

Answer 1

添加一个top margin来完成这个。首先，您需要在 body 样式中包含 html：

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

然后将 height:100% 添加到 .container（因为它是 children）。然后你可以在 .introContent 上设置高度和边距。另外，您在 .introContent 中有浮动元素，您没有清除。您可以通过添加 overflow: hidden:

来更正

#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
}

FIDDLE

更新

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

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

并将其设置为：

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

这将占用屏幕的高度并将您的内容向下推到下方

将 div 放置在固定位置和 100% 高度的元素下方

Place div below element with fixed position and 100% height

html

css

fullscreen

更新

BETTER FIDDLE