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

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.

score 1 · Answer 1 · answered Feb 26 '13 at 19:50

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%;
}

answered Feb 26 '13 at 19:50

Felipe Miosso

7,309
6
44
55

I updated my question while you were writing your answer as I forgot to mention that the header does not have a fixed height. It would be the height of an image that has max-width: 100%; - I suppose I should have used the image instead to illustrate what I mean (as the image height would grow/shrink depending on browser width). – dan2k3k4 Feb 26 '13 at 20:00
Hmm, I don't think that is possible without JS. Take a look at this: http://stackoverflow.com/questions/6794000/css-fixed-position-but-relative-to-container. – Felipe Miosso Feb 26 '13 at 20:26

score 0 · Answer 2 · answered Feb 26 '13 at 19:52

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

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

CSS

HTML

EDIT:

2 Answers2