Place div below element with fixed position and 100% height - html

Question

I have two divs: #lookbookHeader and #introContent. #lookbookHeader has a video in it with position: fixed, height: 100% and height: auto, which I followed from this tutorial. I would like #introContent to be below #lookbookHeader, regardless of the height, as you see on this page. I am trying to create a page where the video is full viewport when the page loads, and you can scroll down to see additional content below.
I have tried every combination of positioning, floating and display on these two elements to try to get this to work and I just can't get it! Currently #lookbookHeader has no styles because it doesn't seem to matter what I apply to it, as the video styles override it when I apply position fixed. If I don't have fixed on the video, then it doesn't scale or size correctly with width/height. What am I missing?
I know I can use jQuery or JavaScript to get the height of #lookbookHeader when the page loads but wondering if there is a way to do this with CSS only. You can see the page here.
I have checked other posts on SO, such as this one, but all seem to reference a fixed element with a set height which is not the case here.
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

Add a top margin to accomplish this. First you need to include html on the body styles:
html,body { //add html
width: 100%;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
Then add height:100% to .container (for it's children). Then you can set the height and margin on .introContent. Also you have floated elements inside .introContent that you're not clearing. You can correct that by adding 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
I have a better solution. Sometimes you just overthink things. Just simply add a blank div above the content like so:
<div class="spacer"></div>
<div id="introContent">
....
and set it to:
.spacer{
height: 100%;
width: 100%;
}
That will take up the height of the screen and bump your content down below
BETTER FIDDLE