Автоматически наследует высоту div для верхнего атрибута другого div?

Question

Вот мой рабочий пример:
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> 

Я хочу, чтобы содержание позиционироваться ниже заголовка при прокрутке сверху (но скрытый, когда вы прокрутите вниз, под заголовком) - это отлично работает ...

H owever Мне нужно удалить вверху: 5em и использовать что-то вроде «наследовать текущую высоту заголовка» - возможно ли это без JS?

Если это невозможно без JS, то я могу просто использовать JS, но я бы лучше попытался найти решение в чистом CSS.

EDIT:

Я хотел бы отметить, что по этой причине я не могу использовать верха: 5em происходит потому, что заголовок не будет иметь фиксированную высоту - изображение (для логотипа) будет использоваться внутри из текст, и это будет установлено на максимальную ширину: 100%, чтобы он сжимался до правой ширины для iPhone и не слишком сильно расширялся, скажем, iPad.

Answer 1

Посмотрите, работает ли это для вас. http://jsfiddle.net/UGhKe/3/

Я добавил еще div с тем же height, но «нефиксированным», чтобы имитировать ваш фиксированный заголовок.

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

Вы можете сделать это с помощью переменных (Использовать SASS или LESS для этого). Взгляните на pen.

КОД:

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