Вот полный пример кода решения Shauna выше для ленивых / растерянных / людей, которые не могут заставить это работать.
аюсь сделать веб-страницу с фиксированным заголовком и прокручиваемой областью содержимого. Это тривиально, когда заголовок имеет известную высоту, но я изо всех сил пытаюсь найти решение, когда заголовок плавный.
Макет, который я хочу это:
--------------
head
--------------
content
--------------
где «head» - это та высота, на которой его контент должен быть, а «content» не имеет минимальной высоты, но достигнет максимальной высоты нижней части области просмотра, прежде чем станет прокручиваемым.
Возможно ли это в наши дни в чистом CSS? Я нацеливаюсь на IE8 +.
Чтобы уточнить, что я хочу,вот что я бы сделал, если бы знал высоту заголовка:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
#head {
background: yellow;
height: 20px; /* I can't rely on knowing this. */
}
#content {
background: red;
position: absolute;
top: 20px; /* here also */
bottom: 0;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="head">some variable height content</div>
<div id="content">
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
</div>
</body>
</html>