Чистая эмуляция CSS frameset
Я искал больше 1 часа без успеха. Существует ли чистый CSS способ эмулировать frameset? Я имею в виду, действительно эмулируя его. Я нашел некоторый интересный материал, где Вы зафиксируете главные и нижние слои камня, но полоса прокрутки для содержания является регулярной полосой прокрутки тела браузера. То, в чем я нуждаюсь, является полосой прокрутки только для блока содержания, как frameset сделал бы.
Я могу заставить его работать путем присвоения переполнения: автоматический моему отделению предметной области и установке фиксированной высоты. Но проблема, я не знаю клиентского размера окна браузера, не используя JavaScript. И я не хочу использовать JavaScript для этого. Я также не могу использовать проценты для высот, поскольку мой главный блок имеет фиксированную высоту. Более низкий блок является тем, который должен расширить или сжать в зависимости от высоты окна браузера. Любая справка ценится.Спасибо!
3 ответа
Как насчет этого?
HTML
<div id="header">
<img src="logo.gif" alt="logo" />
<h1 class="tagline">Oh em gee</h1>
</div>
<div id="content">
<div id="content-offset">
<p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p>
</div>
</div>
CSS
body, html {
margin: 0; padding: 0;
height: 100%;
}
#header {
height: 120px;
position: fixed;
top: 0;
background: red;
width: 100%;
}
#content {
height: 100%;
position: absolute;
top: 0;
}
#content-offset {
margin-top: 120px;
background: aqua;
height: 100%;
width: 100%;
position: fixed;
overflow: auto;
}
Ответ Макро близок, но не работает. Содержание перекрывает заголовок.
Кстати, вы хотите использовать position: fixed; для заголовка, а не для содержания. Это также делает обертку излишней. Вот базовый пример запуска, вы можете копировать и запускать его.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3433129</title>
<style>
body {
margin: 0;
background: aqua;
}
#header {
position: fixed;
height: 120px;
width: 100%;
background: pink;
}
#content {
padding-top: 120px; /* Should be the same as #header height */
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<p>Start of content.</p>
<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<p>End of content.</p>
</div>
</body>
</html>
Нет. Я думаю, вам придется использовать javascript, чтобы получить размер окна для этого, если вы не установите верхний блок на фиксированный размер%, например. сделайте верхний блок 10% и нижний 90%.