页眉和页脚之间的高度为100%

Question

我正在尝试创建一个页眉/页脚(100%宽度,145px高度),页眉/页脚之间的"主要区域"(100%宽度,动态高度)和围绕内容的容器的网页布局独特的背景颜色(860px宽度,动态高度,但始终与页脚"齐平").

(见视觉示例)

我遇到的问题是,当内容很少时,我似乎无法让"内容容器"始终与页脚齐平.如果存在可观的/"正常"内容量或者窗口调整大小,则使用类似(原始示例)的设置会导致页脚浮动在内容上.

以下CSS导致内容和页脚之间存在差距.

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

当内容最小并且页脚"粘贴"到页面底部时,如何使内容容器成为屏幕的整个高度,同时如果存在正常数量的内容,则还可以动态地调整大小(页脚是总是在内容的底部)？

谢谢!

Answer 1

FIDDLE:http://jsfiddle.net/3R6TZ/2/

小提琴输出:http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

UPDATE

在#content-spacer-top与#content-spacer-bottom被用来垫#内容股利不使用填充或利润率将增加箱体尺寸过去的100%高造成的问题.

在CSS3中,有一个box-sizing属性(这里有更多信息)可以解决这个问题,但我假设你不想依赖CSS3功能.

编辑

添加了修复程序并测试到IE7

更新2

替代方法使用:before和:after伪元素而不是spacer divs:http: //jsfiddle.net/gBr58/1/

虽然在IE7或6中不起作用,并且要在IE8中工作,<!DOCTYPE>必须声明(根据w3schools.com),但HTML很干净

更新3(很抱歉这么多更新)

更新它以适应IE6.我通常不会打扰,因为我的公司不支持IE6,但它很容易解决...

Answer 2

我认为你需要将位置：固定在页脚上：

footer {
    width: 100%;
    height: 30px;
    position:fixed;
    bottom:0;
}