Adding elements after fixed header

Question

I have a fixed header at the top of the screen, and if I try to put an element after the header, said element ends up ignoring the height of the header.

HTML

<header></header>
<p>Empty text</p>

CSS

header {
    display: block;
    height: 100px;
    width: 100%;
    background: #eee;
    position: fixed;
    top: 0;
    z-index: 100;
}

JSFIDDLE

I've searched on StackOverflow and other places for solutions to problems similar to this but with no avail (in part due to me having a hard time verbalizing the specific problem). I tried a clearfix,

<header></header>
<div style="clear:both"></div>
<p>Empty text</p>

But that still doesn't work. I also tried adding a margin-top: 100px to the p element, but I consider that bad practice in the case of me changing the height of the header in the future, and also having to do this for every single element following the header or any other element I might add a position: fixed or position: absolute. Additionally, the header will be a fluid height according to different sized screens.

Right now I'm wireframing so I'd really rather not use JavaScript, just plain CSS, if that's possible. If it's not, minimal vanilla javascript will do. This is a fundamental web design problem and I've always countered it with margin-top but I'm wondering if anyone knows of a cleaner, better way to counter it.

Also, this needs to be at least somewhat cross-browser. Again, only wireframing. My wireframes should be able to work on anything that supports basic CSS.

Sorry if this is a duplicate question, I'm sure it is, but I couldn't find anything that quite matches my situation. Any help is much appreciated!

Answer 1

http://jsfiddle.net/09qL0nzv/3/

var p = document.getElementsByTagName("p")[0],
    header = document.getElementsByTagName("header")[0],
    h = window.getComputedStyle(header).getPropertyValue("height");

p.style.marginTop=h;

This will set a margin-top to the paragraph equal to the height of fixed header. However, this does not take padding or border into account. There are two possible solutions for this.

Use box-sizing: border-box on the header. This will make sure that the height, including padding and a border, will be the height as defined in the stylesheet. (I highly recommend using border-box on all your elements, like so: *, *:before, *:after {-moz-box-sizing:border-box;box-sizing: border-box;}.)

Another solution is adding the padding and border to the computed value in JavaScript, and include that value in the margin top that you set to p. I don't like this solution, but it works.