我正在尝试创建一个页眉/页脚(100％宽度,145px高度)的网页布局,页眉/页脚(100％宽度,动态高度)之间的“主要区域”以及围绕内容的容器独特的背景颜色(宽860px,动态高度,但总是与页脚相反).
我遇到的问题是,当内容最小时,我似乎无法使用“内容容器”与页脚齐平.使用像(original example)这样的设置会导致页脚浮动在内容上,如果有一个可观的/’正常’的内容量,或者窗口被调整大小.
并且以下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;
}
如果内容最小,并且页脚“粘贴”到页面的底部,那么如何使内容容器成为屏幕的全部高度,同时如果存在正常的内容量,则动态调整大小(页脚为总是在内容的底部)？
谢谢！
解决方法
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用于填充#content div,而不使用将使盒子大小超过100％高度的填充或边距导致问题.
在CSS3中,有一个可以解决这个问题的Box-sizing属性(more info here),但是我假设你不想依赖CSS3的功能.
编辑
添加了一个修复程序,并测试到IE7
更新2
替代方法使用：before和：之后伪元素而不是spacer divs：
http://jsfiddle.net/gBr58/1/
在IE7或6中不起作用,并且在IE8中工作,<！DOCTYPE>必须声明(根据w3schools.com),但HTML是好的和干净的
更新3(对不起这么多更新)
将其更新为IE6.我通常不打扰我的公司不支持IE6,但这是一个容易的修复…
