html固定页脚布局及样式,CSS单列布局，以页眉和页脚为中心的固定宽度为100％高...

小编典典

更新资料

对于现代浏览器(2015年)，使用display:flex以下简单方法即可：

html,

body {height:100%; padding:0; margin:0; width:100%;}

body {display:flex; flex-direction:column;}

#main {flex-grow:1;}

/* optional */

header {min-height:50px; background:green;}

#main {background:red;}

footer {min-height:50px; background:blue;}

header

content

footer

上面的代码既可以使用固定高度的页眉和页脚(只需在样式中添加一个高度)，也可以使用可变高度(如当前所示-

可以根据页眉和页脚的内容而变化)，而内容将占用其余空间。

如果内容比文档长，则页脚将被下推。

旧帖子：

有几种使用纯CSS做到这一点的方法。基本上，您需要从这样的html结构开始：

版本1 使用边界框，因此将与较旧的浏览器不兼容(并且您可能需要添加moz，webkit和ms前缀才能使其在所有浏览器中均可使用)：

html,

body { height: 100%; margin: 0; padding: 0; }

#wrapper { padding: 100px 0 75px 0; height: 100%; box-sizing: border-box; }

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

.top { margin-top: -100px; height: 100px; }

.bottom { margin-bottom: -75px; height: 75px; }

.container { padding: 10px; }

版本2 使用绝对定位，并且对跨浏览器更友好：

html,

body {min-height:100%; padding:0; margin:0;}

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}

.middle {min-height:100%;}

.top {margin-top:-50px; height:50px;}

.bottom {margin-bottom:-50px; height:50px;}

.container {padding:10px;}

版本3 略微更改了html，但是如果您具有可变的高度页眉和页脚，则它会更健壮：

CSS

html,

body {min-height:100%; padding:0; margin:0;}

#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}

.table {display:table; width:100%; height:100%;}

.row {display:table-row;}

.cell {display:table-cell;}

.middle {height:100%;}

.container {padding:10px;}

2020-05-10