固定页眉,固定页脚动态内容

Question

我正在努力学习我的动态内容.那么让我在一张图片中解释一下:

所以我的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>

我的问题:如何让我的容器变得流畅,页眉和页脚是否固定？容器中的块设置为50%的高度和宽度,因此只有容器必须是100%的高度( - 固定的页眉和页脚).

Answer 1

你可以用box-sizing财产做到这一点.

像这样:

小提琴

(我在这里使用的示例假定标题高度为64px,页脚高度为30px)

标记

<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;
}