#html #css
#HTML #css
Вопрос:
Если вы посмотрите на страницу сообщений в facebook, там есть заголовок, а под ним — три раздела. Полоса прокрутки управляет средней секцией, а левая и правая секции остаются статичными. Как мне реализовать такое же поведение на моей веб-странице? То есть все остается исправленным, и полоса прокрутки управляет только средней частью? Кстати, реализация Facebook не работает должным образом в Chrome, а в FF перестает работать при включении Firebug.
Ответ №1:
Вам не нужно устанавливать что-либо специальное в центральной части. Каждый элемент блока, который вы хотите сохранить неподвижным, должен иметь position: fixed;
.
например
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
header {
display: block;
position: fixed;
z-index: 10; /* keeps the header over the content as the content gets scrolled */
top: 0;
width: 100%;
height: 100px;
padding: 10px;
background-color: black;
}
#sidebar {
position: fixed;
top: 120px; /* add height padding of header */
left: 0;
width: 150px;
padding: 10px;
background-color: blue;
}
#content {
margin: 120px 0 0 170px; /* add adjacent elements' size padding */
padding: 10px;
}
</style>
</head>
<body>
<header>
This will stay on the top of the browser window.
</header>
<div id="sidebar">
This will stay on the left.
</div>
<div id="content">
This will scroll normally.
</div>
</body>
</html>
Комментарии:
1. @Preacher Спасибо! при прокрутке мой средний контент перекрывает заголовок. Как мне заставить ее вести себя должным образом и оставаться под заголовком?
2. Вы можете изменить z-индекс заголовка. Проверьте правку в моем ответе.
3. @Preacher, спасибо! z-index решает вышеуказанную проблему. Однако также есть нижний колонтитул, и содержимое средней панели теперь простирается до самого низа страницы и выходит за нижний колонтитул. Даже если ее z-индекс меньше, чем у нижней панели. Даже если бы z-index работал, он просто закрывал бы содержимое в нижней части средней панели.
4. У меня было position: relative для средней панели, как только я удалил это, проблема нижнего колонтитула была решена.
5. Решение с z-индексом не собирается ее сокращать. Теперь верхнее содержимое центрального div скрыто за заголовком. Знаете ли вы, как переместить основной раздел или содержащие его разделы вниз, чтобы они начинались под заголовком? Большое спасибо!