Как Вы создаете не прокрутку отделения наверху страницы HTML без двух наборов полос прокрутки
Вы также можете использовать BitVector32 и особенно Section struct . Пример очень хороший.
5 ответов
Попробуйте это:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Header/Full Page Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,
div {
margin: 0;
padding: 0;
}
body {
/* Disable scrollbars and ensure that the body fills the window */
overflow: hidden;
width: 100%;
height: 100%;
}
#header {
/* Provide scrollbars if needed and fix the header dimensions */
overflow: auto;
position: absolute;
width: 100%;
height: 200px;
}
#main {
/* Provide scrollbars if needed, position below header, and derive height from top/bottom */
overflow: auto;
position: absolute;
width: 100%;
top: 200px;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="main">
<p>FIRST</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>LAST</p>
</div>
<!--[if lt IE 7]>
<script type="text/javascript">
var elMain = document.getElementById('main');
setMainDims();
document.body.onresize = setMainDims;
function setMainDims() {
elMain.style.height = (document.body.clientHeight - 200) + 'px';
elMain.style.width = '99%'
setTimeout("elMain.style.width = '100%'", 0);
}
</script>
<![endif]-->
</body>
</html>
В основном, то, что Вы делаете, удаляет полосы прокрутки из тела и применяет полосы прокрутки к элементам в документе. Это просто. Прием должен заставить #main отделение к размеру заполнять пространство ниже заголовка. Это выполняется в большинстве браузеров путем установки и top и эти bottom положения и отъезда эти height сброс. Результат состоит в том, что вершина отделения фиксируется ниже заголовка, и нижняя часть отделения будет всегда простираться в нижнюю часть экрана.
, Конечно, всегда существует IE6 там, чтобы удостовериться, что мы зарабатываем наши зарплаты. До версии 7 IE не получил бы размеры из конфликтующих абсолютных положений. Некоторые люди , который выражения CSS IE использования для решения этой проблемы для IE6, но этих выражений буквально оценивают на каждом mousemove, таким образом, я просто изменяю размер #main отделение на изменить размер событии и скрываю тот блок JavaScript от других браузеров с помощью условного комментария.
строки, устанавливающие ширину на 99% и setTimeout для задержки, это к 100% фиксирует немного причуды рендеринга в IE6, который заставляет горизонтальную полосу прокрутки появляться иногда, когда Вы изменяете размер окна.
Примечание: необходимо использовать doctype и вытащить IE из режима причуд.
Используйте фиксированную позицию <div> элемент, который имеет 100% шириной и высокое z-index.
Вы также захотите удостовериться, что это, запуск Вашей прокрутки содержания не затенен фиксированным <div>, пока Вы не начинаете прокручивать вниз путем помещения этого в другой <div> и расположения этого соответственно.
<body>
<div style="position: fixed; top: 0px; width:100%; height: 100px;">
HEader content goes here
</div>
<div style="margin-top: 100px;">
Main content goes here
</div>
</body>
Примечание высота первого <div>, и верхнее поле второго, должна будет регулироваться для удовлетворения потребностям.
P.S. Это не работает в IE7, по некоторым причинам, но это - хорошая начальная точка, и я уверен, что можно разработать некоторую вариацию на эту тему, что работы в способе, к которому Вы хотите это.
Меня будут, вероятно, колотить пуристы CSS здесь, но использование таблицы с 100% шириной и работ высоты в любом браузере, и не требует определенных для браузера взломов CSS.
Вы могли альтернативно использовать
<div style='position:absolute;top:0px:left:0px;'>Text</div>;
, Это будет jamm отделение на верхней части страницы, но если Ваша страница прокрутит его вниз, то останется там.
Belugabob имеет верное представление, который то, что Вы пытаетесь сделать, фиксируется, располагая, который не поддерживает IE 6.
я изменил пример от нижней части это учебное руководство , которое должно сделать то, что Вы хотите и поддерживаете IE 6 + в дополнение ко всем хорошим браузерам. Это работает, потому что IE позволяет Вам поместить JavaScript в объявления стиля:
<style type="text/css">
div#fixme {
width: 100%; /* For all browsers */
}
body > div#fixme {
position: fixed; /* For good browsers */
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( 0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->
<body>
<div id="fixme"> ...