Какой лучший способ сделать фиксированную верхнюю панель, которая не перекрывает верхнюю? - PullRequest
Новая
       7

Какой лучший способ сделать фиксированную верхнюю панель, которая не перекрывает верхнюю?

7 голосов
/ 11 марта 2009

Например, в stackoverflow есть верхняя панель для новых членов. Верхняя панель фиксируется и сдвигает страницу вниз, не перекрывая верхнюю часть страницы.

Как это сделать?

Javascript? Или это можно сделать просто css?

Ответы [ 4 ]

9 голосов
/ 19 июня 2009

Вы можете сделать что-то вроде этого, чтобы создать фиксированный заголовок: 

<style>
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content { padding-top: 50px; }
</style>

<body>
<div class="header">header</div>
<div class="content">content</div>
</body>

Возможно, проверьте исправление ie5.5 / ie6.0 здесь: http://www.howtocreate.co.uk/fixedPosition.html

4 голосов
/ 19 июня 2009

Адаптация кода Михила к вопросу ОП в ответе ben_h. 

<style type="text/css">
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content{ /* normal stuff here */ }

/*** Only selects div.content immediately preceded by div.header.
If div.header doesn't appear, it won't select. ***/
div.header + div.content { padding-top: 50px; }
</style>

<body>
<div class="header">header</div>
<div class="content">content</div>
</body>

Я предупрежу вас, что старый IE6 не будет этим увлекаться, но IE7.js Дина Эдвардса добавит поддержку селектора братьев и сестер (+).

2 голосов
/ 11 марта 2009

Если столбец равен position: fixed, один из способов предотвратить его перекрытие содержимого - установить статическую высоту, а затем установить верхнее поле для основного контейнера с такой же высотой.

Если вы заранее не знаете высоту фиксированного элемента div, вам придется использовать JS, чтобы определить его высоту и соответственно установить поле контейнера.

0 голосов
/ 11 марта 2009

Вы должны быть в состоянии сделать это только с помощью CSS.

Вот отличная статья о том, как создать «Святой Грааль» в CSS-дизайне.

Страница с тремя столбцами. Одна левая боковая панель фиксированной ширины для меню, правая боковая панель для ваших объявлений или фотографий и масштабируемый центр, в котором размещается контент.

См:

В поисках Святого Грааля: CSS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...