Место div ниже элемента с фиксированным положением и 100% высоты

Question

У меня есть два divs: #lookbookHeader и #introContent. #lookbookHeader имеет видеоролик в нем с position: fixed, height: 100% и height: auto, из которых я следовал с this tutorial. Я хотел бы #introContent быть ниже #lookbookHeader, независимо от высоты, как вы видите на this page. Я пытаюсь создать страницу, где видео будет полно viewport, когда страница загружается, и вы можете прокрутить вниз, чтобы увидеть дополнительный контент ниже.

Я пробовал каждую комбинацию позиционирования, плавания и отображения на этих двух элементах, чтобы попытаться заставить это работать, и я просто не могу его получить! В настоящее время #lookbookHeader не имеет стилей, потому что, кажется, не имеет значения, к чему я отношусь, поскольку стили видео переопределяют его, когда я применяю фиксированное положение. Если я не зафиксировал видео, тогда он не масштабируется и не будет правильно масштабироваться с шириной/высотой. Что мне не хватает?

Я знаю, что могу использовать 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

Добавить верхний margin для достижения этой цели. Прежде всего, необходимо включить html на body стилей:

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

Затем добавьте height:100% к .container (для его детей). Затем вы можете установить высоту и маржу на .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

UPDATE

У меня есть лучшее решение. Иногда вы просто переусердствовали. Просто добавьте пустой div выше содержание следующим образом:

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

и установить его:

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

Это займет высоту экрана и увеличите содержание вниз

BETTER FIDDLE