固定页眉、固定页脚动态内容答案

【问题标题】：Fixed header, fixed footer dynamic content固定页眉、固定页脚动态内容
【发布时间】：2013-10-17 11:53:11
【问题描述】：

我正在为我的动态内容而苦苦挣扎。所以让我用图片解释一下：

所以我的 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% 的高度（- 固定的页眉和页脚）。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用box-sizing 属性来做到这一点。

像这样：

FIDDLE

（我在这里使用的示例假定页眉高度为 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;
}

【讨论】：

使用 float，因为 Haidy 要求它是流畅的 @Danield
好的，现在可以了，当我的页脚小于页眉时也可以吗？
@Haidy ，我更新了我的答案并调整了一个小于页眉高度的页脚高度
@Danield 谢谢老兄！像老板一样工作;)

【解决方案2】：

这样

working demo

css

*{
    margin:0;
    padding:0;
}
#header{
    height:100px;
    background-color:red;
    position:fixed;
    top:0;
    width:100%;
}
#footer{
    height:100px;
    background-color:green;
    position:fixed;
    bottom:0;
    width:100%;
}
#container{
    background-color:#F7F7F7;
    width:100%;
    top:100px;
    position:relative;
}
.block{
    width:50%;
    background-color:gray;
  float:left;
}

【讨论】：

这个不行？ jsfiddle也不行吗？容器很小并且不与其他空白重叠？

【解决方案3】：

使用float 使其流畅设计。添加边框或填充时请注意width 部分。因为这些是用width 计算的。正如 Danield 提到的，您可以使用 Box sizing 显然，测量应该是百分比以使其响应或者你可以写media queries。

【讨论】：

【解决方案4】：

您使用twitter-bootstrap 标记了您的问题。这是一种对 Bootstrap 更友好的方法：

演示： http://bootply.com/render/88297

代码： http://bootply.com/88297

这使用有点标准的 BS 页眉/导航和固定页脚。然后中心容器使用table、table-row 和table-cell 将中心框的大小相应地设置为50/50。

.center-container {
  height:100%;
  display: table;
  width:100%;
  margin:0;
}

.center-row {
  height:50%;
  width:100%;
  display: table-row;
}

.center-row > div {
  height:100%;
  width:50%;
  display: table-cell;
  border:1px solid #eee
}

【讨论】：