Automatically inherit height of div for top attribute of another div? - css

Question

Here's my working example:
http://jsfiddle.net/UGhKe/2/
CSS
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: 5em;
}
.content {
position: absolute;
top: 5em;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
HTML
<div id="body">
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
I want the content to be positioned below the header when you scroll the top (but hidden when you scroll down, under header) - this works fine...
However I need to remove top: 5em and use something like "inherit the current height of the header" - is it possible without JS?
If it's really not possible without JS, then I can just use JS but I'd rather try and find a solution in pure CSS.
EDIT:
I should note that the reason I can't use top: 5em is because the header will not have a fixed height - an image (for a logo) will be used inside of the text, and that would be set to max-width: 100% so that it shrinks to right width for an iPhone and doesn't expand too much on say an iPad.

Answer 1

See if thats work for you. http://jsfiddle.net/UGhKe/3/
I added another div with the same height but "non-fixed" to simulate your fixed header.
HTML
<div id="body">
<div id="blockHeader"></div>
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
CSS
html, body { margin:0; padding:0; }
#blockHeader
{
width:100%;
height: 5em;
}
.content {
position: absolute;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}

Answer 2

You can do it using variables(Use SASS or LESS for that). Take a look at the pen.
CODE:
$headerContentVariable: 5em;
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: $headerContentVariable;
}
.content {
position: absolute;
top: $headerContentVariable;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}