Вопрос по html5, css, html, jquery, css3 – положение фиксированного заголовка в HTML

44

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

Мне нужно разместить контейнер 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>
Возможный дубликатCSS-Only Scrollable Table with fixed headers Max Alexander Hanna
прочитай этоcss-tricks.com/… sandeep
Фиксированный заголовок не является частью макета. Он плавающий. Вы должны дать контентmargin-top так что он действует так, как будто там был заголовок. Blender

Ваш Ответ

6   ответов
1

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

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;
}
Ссылка -limpid.nl/lab/css/fixed/header
54

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

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

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

Добавлена JsFiddle:jsfiddle.net/KTgrS
Один из способов обойти требование Javascript для измерения и корректировки вершины поля - просто продублировать содержимое в заголовке. Поместите одну копию в & quot; видимость: скрытая & quot; стилизованный div, который по-прежнему является частью страницы, а другой - как "position: fixed".
Вы знаете, что делает позиция CSS? он хочет фиксированный элемент относительно дисплея
ты пыталсяposition:absolute?
Да, это вне. но я не могу исправить верхнюю границу, так как содержимое в заголовке динамически меняется от страницы к странице, где меньше содержимого, чем разрыв между заголовком и контейнером. Sowmya
6

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

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

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

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

демонстрация

1

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

0

установить #container divtop вzero

#container{ 


 top: 0;



}

Похожие вопросы