网页设计-[最小高度100%页脚保持在底部的布局方法]

有时候，我们用CSS创建一个高度自适应布局，如何保证页脚（footer）在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子，但总感觉不是那么完美，经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法，兼容IE5.0+，Opera 8.5+，Firefox 1.5+。下面我们看步骤：

1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值，同时清除所有元素的 margin 和 padding。顺便提一下，经过我的测试，html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。如何，是不是有点不好理解？

 

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

2、因为上面提到的问题，所以为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用：

#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}

这样，一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看，我加了一些宽度和背景色修饰，如下：

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #f00;
}
#wrapper {
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>example 2< /title>
< style type="text/css">
/*< ![CDATA[*/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #F00;
}
#wrapper {
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}
#header {
background: Green;
height: 40px;
}
#sidebar {
float: left;
width: 200px;
background: Gray;
}
#content-box {
float: right;
width: 570px;
background: Olive;
}
#footer {
height: 50px;
background: Background;
width:770px;
margin: auto;
}
/*]]>*/
< /style>
< /head>
< body>
< div id="wrapper">
< div id="header">此处显示  id "header" 的内容< /div>
< div id="content-box">此处显示  id "content-box" 的内容< /div>
< div id="sidebar">此处显示  id "sidebar" 的内容< /div>
< /div>
< div id="footer">此处显示  id "footer" 的内容< /div>
< /body>
< /html>

3、加上页头页脚和内容部分，为了让 footer 在最下方，我们当然要把 footer“请出”wrapper 之外。当然，这样高度就超过一屏了，别急，后面有解决办法。

#header {
background: Green;
height: 40px;
}
#sidebar {
float: left;
width: 200px;
background: Gray;
}
#content-box {
float: right;
width: 570px;
background: Olive;
}
#footer {
height: 50px;
background: Background;
width:770px;
margin: auto;
}

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>example 2< /title>
< style type="text/css">
/*< ![CDATA[*/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #F00;
}
#wrapper {
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}
#header {
background: Green;
height: 40px;
}
#sidebar {
float: left;
width: 200px;
background: Gray;
}
#content-box {
float: right;
width: 570px;
background: Olive;
}
#footer {
height: 50px;
background: Background;
width:770px;
margin: auto;
}
/*]]>*/
< /style>
< /head>
< body>
< div id="wrapper">
< div id="header">此处显示  id "header" 的内容< /div>
< div id="content-box">此处显示  id "content-box" 的内容< /div>
< div id="sidebar">此处显示  id "sidebar" 的内容< /div>
< /div>
< div id="footer">此处显示  id "footer" 的内容< /div>
< /body>
< /html>

5、举一反三，利用上面的原理我们还可以做一个一边固定宽度一边自适应宽度的液态弹性布局，修改一些宽度然后给 #content-box 下面再套一层就可以实现了。

< title>Footer Stick< /title>
< style type="text/css">
/*< ![CDATA[*/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
}
#wrapper {
width: 100%;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}
#header {
background: Green;
height: 40px;
}
#out-content {
padding-bottom: 50px;
}
#out-content:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
* html #out-content {
height: 1%;
}
#sidebar {
float: left;
background: Gray;
margin-right: -200px;
width:200px;
}
#content-box {
float: right;
width: 100%;
background: Olive;
}
#content {
margin-left: 200px;
}
#footer {
height: 50px;
background: Background;
margin: -50px auto 0;
}
/*]]>*/
< /style>
< /head>
< body>
< div id="wrapper">
< div id="header">
< h3>header< /h3>
< code>#header {
background: Green;
height: 40px;
}< /code> < /div>
< div id="out-content">
< div id="content-box">
< div id="content">
< h3>content< /h3>
< code>#content {
float: right;
width: 80%;
background: Olive;
} < /code>< /div>
< /div>
< div id="sidebar">
< h3>sidebar< /h3>
< code>#sidebar {
float: left;
width: 20%;
background: Gray;
}< /code> < /div>
< /div>
< /div>
< div id="footer">
< h3>footer< /h3>
< code>#footer {
height: 50px;
background: Background;
width:770px;
margin: -50px auto 0;
}< /code> < /div>
< /body>
< /html>

其他问题，如果有人希望中间两栏高度相同的话可以使用图片欺骗法，见 创建各栏同高的多栏布局。

OK，经过以上方法，这个布局应该是比较完美了。

转载于:https://www.cnblogs.com/gjy_2008/archive/2008/11/17/1334958.html