Я пытаюсь создать сайт с горизонтальной прокруткой с фиксированным верхним и нижним колонтитулом.
Цели: 1. Исправлены верхний и нижний колонтитулы. 2. Нет вертикальной прокрутки. 3. Раздел содержимого заполняет все пространство между верхним и нижним колонтитулами.
Я использовал position: absolute в содержимом, чтобы убедиться, что высота: 100% занимает область между заголовком и нижним колонтитулом. (моя третья цель) Однако это также приводит к появлению вертикальной полосы прокрутки.
живая демонстрация: http://jsfiddle.net/wQ2XR/230/
как я могу достичь своих целей без появления вертикальной полосы прокрутки?
Заранее большое спасибо!
HTML-код:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="2">
<div id="b">
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question? </p>
</div>
</div>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
CSS:
body, html {
height: 100%;
padding: 0;
margin: 0;
}
body {
width: 100%;
}
header {
}
#a {
position: fixed;
height: 50px;
top: 0;
width: 100%;
background-color: blue;
}
#2 {
position: relative;
padding: 50px 0 25px 0;
}
#b {
height: 100%;
position: absolute;
}
#bb {
position: relative;
height: 100%;
margin: 50px 0 0 0;
width: 2000px;
background-color: yellow;
}
footer {
}
#c {
position: fixed;
height: 25px;
bottom: 0;
width: 100%;
background-color: green;
}
