позиция фиксированный заголовок в html

Question

У меня есть заголовок (динамическая высота) с фиксированным положением.

Мне нужно поместить контейнер 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> 

Answer 1

Ну! Когда я увидел свой вопрос сейчас, я понял, что не хочу упоминать фиксированное значение поля из-за динамической высоты заголовка.

Вот что я использовал для таких сценариев.

Рассчитайте высоту заголовка с помощью jQuery и примените его как верхнее значение поля.

var divHeight = $('#header-wrap').height(); 
$('#container').css('margin-top', divHeight+'px'); 

Demo

Answer 2

Ваш #container должен быть вне # заголовок-обруча, затем указать фиксированную высоту для # header- wrap, after, укажите margin-top для #container, равного высоте заголовка #. Что-то вроде этого:

#header-wrap { 
    position: fixed; 
    height: 200px; 
    top: 0; 
    width: 100%; 
    z-index: 100; 
} 
#container{ 
    margin-top: 200px; 
} 

Надежда это то, что вам нужно: http://jsfiddle.net/KTgrS/

Answer 3

Я полагаю, ваш заголовок фиксирован, потому что вы хотите, чтобы остаться в верхней части страницы, даже когда пользователь прокручивает вниз, но вы не хотите, чтобы он закрывал контейнер. Однако параметр position: fixed удаляет элемент из линейного макета страницы, поэтому вам нужно либо установить верхнее поле «следующего» элемента так же, как высота заголовка, или (если по какой-либо причине вы не назовете, t хочу сделать это), поместите элемент-заполнитель, который занимает пространство в потоке страницы, но появится под ним, где отображается заголовок.

Answer 4

position :fixed отличается от другой планировки. Как только вы fixedposition за header, имейте в виду, что вы должны установить margin-top для content div.

Answer 5

набор #container ДИВ верхней к нулевой

#container{ 


top: 0; 



} 

Answer 6

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