我正在努力处理动态内容。所以让我用一张图来解释:
所以我的 html 看起来像:
<div id="header"> ... </div>
<div id="container">
<div class="block"> ... </div>
<div class="block"> ... </div>
<div class="block"> ... </div>
<div class="block"> ... </div>
</div>
<div id="footer"> ... </div>
我的问题:我怎样才能使我的容器流畅并固定页眉和页脚?容器中的 block 设置为 50% 的高度和宽度,因此只有容器必须是 100% 的高度(- 固定的页眉和页脚)。
最佳答案
您可以使用 box-sizing
属性来做到这一点。
像这样:
(我在这里使用的示例假定页眉高度为 64 像素,页脚高度为 30 像素)
标记
<header>header</header>
<div class="container">
<div id="content">
<div class="block">block1</div><!--
--><div class="block">block2</div><!--
--><div class="block">block3</div><!--
--><div class="block">block4</div>
</div>
</div>
<footer>footer</footer>
CSS
html,body
{
height: 100%;
}
header,footer,div
{
width: 100%;
}
.container
{
height: 100%;
background: pink;
margin: -64px 0 -30px;
padding: 64px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content {
overflow:auto;
height:100%;
}
.block
{
width: 50%;
height: 50%;
display: inline-block;
border: 1px solid yellow;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 30px;
background: gray;
position: relative;
z-index:1;
}
关于html - 固定页眉,固定页脚动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19426009/