У меня есть заголовок (динамическая высота) с фиксированной позицией.
Мне нужно поместить контейнер div прямо под заголовком. Поскольку высота заголовка является динамической, я не могу использовать фиксированное значение для верхнего поля.
Как это можно сделать?
Вот мой CSS:
#header-wrap {
position: fixed;
height: auto;
width: 100%;
z-index: 100
}
#container{
/*Need to write css to start this div below the fixed header without mentioning top margin/paading*/
}
... и HTML:
<div id="header-wrap">
<div id="header">
<div id="menu">
<ul>
<li><a href="#" class="active">test 0</a></li>
<li><a href="#">Give Me <br />test</a></li>
<li><a href="#">My <br />test 2</a></li>
<li><a href="#">test 4</a></li>
</ul>
</div>
<div class="clear">
</div>
</div>
</div><!-- End of header -->
<div id="container">
</div>
Ну! Когда я увидел свой вопрос сейчас, я понял, что не хочу упоминать фиксированное значение поля из-за динамической высоты заголовка.
Вот что я использовал для таких сценариев.
Вычислите высоту заголовка с помощью jQuery и примените его как верхнее значение поля.
var divHeight = $('#header-wrap').height();
$('#container').css('margin-top', divHeight+'px');
Ваш #container должен быть за пределами # header-wrap, а затем указать фиксированную высоту для # header-wrap, после этого укажите margin-top для #container, равного высоте заголовка #. Что-то вроде этого:
#header-wrap {
position: fixed;
height: 200px;
top: 0;
width: 100%;
z-index: 100;
}
#container{
margin-top: 200px;
}
Надеюсь, это то, что вам нужно: http://jsfiddle.net/KTgrS/
body{
margin:0;
padding:0 0 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:25;
}
@media screen{
body>div#header{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
Я предполагаю, что ваш заголовок исправлен, потому что вы хотите, чтобы он оставался в верхней части страницы, даже когда пользователь прокручивается вниз, но вы не хотите, чтобы он закрывал контейнер. Однако установка position: fixed удаляет элемент из линейного макета страницы, поэтому вам нужно либо установить верхнее поле "следующего" элемента таким же, как высота заголовка, либо (если по какой-либо причине вы не хотите этого делать), поместите элемент-заполнитель, который занимает пробел в потоке страницы, но появится под ним, где появляется заголовок.
position :fixed отличается от другого макета.
Если вы fixed position для своего header, имейте в виду, что вы должны установить margin-top для content div.
установить #container div верх до ноль
#container{
top: 0;
}