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

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

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

Ответ 1

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

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

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

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

Демо

Ответ 2

Ваш #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/

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

установить #container div верх до ноль

#container{ 


 top: 0;



}