加载中…如何将页脚固定在页面底部
(2012-07-03 18:20:53)
标签：
如何将页脚固定在页面底部it |
分类： html |
如何将页脚固定在页面底部
今天在www.w3cplus.com 大漠博客看到关于如何将页脚固定在也页面底部，将其进行了练习，发现有很大收获
鉴于本人多JS不够深入，所以没有接着看用JS来解决此的方法
首先平时大多没注意的的是页脚会随着我们网页的内容而上下浮动， 内容少的时候他就往上。这样影响的整个网页的美观。
eg:这样写
<style>
html,body{ height:100%; margin:0; padding:0;}
.main{ height:auto !important; height:100% ;min_height:100%; position:relative;}
.contain{background:#909; margin:0 auto; height:200px;width:500px;}
.footer{ height:80px;background:red;width:100%;}
.header{width:100%; background:#3FF; height:100px;}
</style>
</head>
<body>
<div id="main">
<div
class="header">Header
Section</div>
<div
class="contain">44444</div>
<div
class="footer">Footer
Section</div>
</div>
</body>
截图如下：http://s4/middle/7f95e24bgc3ea4869c533&690
那么今天主要和大家一起学习如何将页脚固定在页面的底部？
方法一：
<style>
html,body{ height:100%; margin:0; padding:0;}
.main{ height:auto !important; height:100% ;min_height:100%; position:relative;}
.contain{background:#909; margin:0 auto; padding-bottom:80px; width:500px;}
.footer{ height:80px; position:absolute; bottom:0px; background:red;width:100%; clear:both;}
.header{width:100%; background:#3FF; height:100px;}
</style>
</head>
<body>
<div
id="main">
<div
class="header">Header
Section</div>
<div
class="contain">44444</div>
<div
class="footer">Footer
Section</div>
</div>
</body>
截图如下：
http://s5/middle/7f95e24bgc3ea4962b804&690
实现原理：
1、html和body标签都要设置margin和padding都为0；同时他们的高度也必须设置为100%，这样就可以在容器上设置百分比了
2、：main容器必须设置一个最小高度为100%，这主要使他在内容少的时候也能保持100%的高度，不过IE6不支持MIN-HEIGHT,所以同时也设置height:100%还有一个就是关于IE6下的bug，所以添加了
height:auto !important;此外我们还需要设置它的相对定位，以便于你们进行绝对定位后该容器不会跑了
3、contian他必须设置padding_bottom,其大小就是footer的高度
4、就是footer，它的高度就是 上面contain的padding_bottom.然后将其设为绝对定位，同时bottom为0，这样它就就页底了
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。
缺点：
不足之处就是需要给div#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将div#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）div#footer的高度，才能正常运行。
方法二：
<style>
html,body{ margin:0; padding:0; height:100%}
.main{ min-height:100%; heiguto !important; height:100%; margin:0 auto;}
.contain{ margin-bottom:200px; background:#30F;}
.footer{ position:absolute; bottom:0; height:200px; background:#06F;width:100%;}
.head{ height:100px; background:#F0F; width:500px; width:100%;}
</style>
<body>
<div class="main">
<div
class="head">55555</div>
<div
class="contain"></div>
</div>
<div class="footer">5555</div>
</body>
截图如下：
http://s8/middle/7f95e24bgc3ea4a8327a7&690
原理：
与方法一不同的是方法二和方法三都将FOOTER层放置在大层的外面，与最外面的层同级
1、html和body标签都要设置margin和padding都为0；同时他们的高度也必须设置为100%，这样就可以在容器上设置百分比了
2、：main容器必须设置一个最小高度为100%，这主要使他在内容少的时候也能保持100%的高度，不过IE6不支持MIN-HEIGHT,所以同时也设置height:100%还有一个就是关于IE6下的bug，所以添加了
height:auto !important;
3、contian他必须设置margin_bottom,其大小就是footer的高度
4、就是footer，它的高度就是 上面contain的margin_bottom.然后将其设为绝对定位，同时bottom为0，这样它就就页底了
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。
缺点：
要给footer设置固定值，因此无法让footer部分自适应高度。
方法三：
<style>
html,body{ margin:0; padding:0; height:100%;}
.main{ min-height:100%; height:auto !important; height:100%; margin:0 auto -60px;}
.contain{ background:#0F3;width:100%;}
.push,.footer{ height:60px; background:#96F; clear:both;}
.push{ display:none;}
.head{ width:100%; background:#F03; height:100px;}
</style>
<body>
<div class="main">
<div
class="head">11111</div>
<div
class="contain">22222</div>
<div
class="push"></div>
</div>
<div class="footer">33333</div>
</body>
截图如下：
http://s8/middle/7f95e24bgc3ea4b58bb17&690
原理： 方法三与方法二都是把footer放置在外面与Mian层同级，在这里方法三在main里面添加了一个空层，push，它必须放置在main里面的最后一层，而且必须为空层，持方法简单
1、html和body标签都要设置margin和padding都为0；同时他们的高度也必须设置为100%，这样就可以在容器上设置百分比了
2、：main容器必须设置一个最小高度为100%，这主要使他在内容少的时候也能保持100%的高度，不过IE6不支持MIN-HEIGHT,所以同时也设置height:100%还有一个就是关于IE6下的bug，所以添加了
height:auto !important; 此外将Mian的margin_bottom设置为footer的高度。
3、就是footer，它的高度就是 上面contain的margin_bottom.此方法不必将footer设为绝对定位，这样它就就页底了
优点：
简单明了，易于理解，兼容所有浏览器。
缺点：
较之前面的两种方法，多使用了一个div.push容器，同样此方法限制了footer部分高度，无法达到自适应高度效果。
如果大家对方法三想了解更多可以点击这里或者直接从DEMO中下载代码自己研究一下。
今天在www.w3cplus.com 大漠博客看到关于如何将页脚固定在也页面底部，将其进行了练习，发现有很大收获
鉴于本人多JS不够深入，所以没有接着看用JS来解决此的方法
首先平时大多没注意的的是页脚会随着我们网页的内容而上下浮动， 内容少的时候他就往上。这样影响的整个网页的美观。
eg:这样写
<style>
html,body{ height:100%; margin:0; padding:0;}
.main{ height:auto !important; height:100% ;min_height:100%; position:relative;}
.contain{background:#909; margin:0 auto; height:200px;width:500px;}
.footer{ height:80px;background:red;width:100%;}
.header{width:100%; background:#3FF; height:100px;}
</style>
</head>
<body>
<div id="main">
</body>
截图如下：http://s4/middle/7f95e24bgc3ea4869c533&690
那么今天主要和大家一起学习如何将页脚固定在页面的底部？
方法一：
<style>
html,body{ height:100%; margin:0; padding:0;}
.main{ height:auto !important; height:100% ;min_height:100%; position:relative;}
.contain{background:#909; margin:0 auto; padding-bottom:80px; width:500px;}
.footer{ height:80px; position:absolute; bottom:0px; background:red;width:100%; clear:both;}
.header{width:100%; background:#3FF; height:100px;}
</style>
</head>
<body>
</body>
截图如下：
http://s5/middle/7f95e24bgc3ea4962b804&690
实现原理：
1、html和body标签都要设置margin和padding都为0；同时他们的高度也必须设置为100%，这样就可以在容器上设置百分比了
2、：main容器必须设置一个最小高度为100%，这主要使他在内容少的时候也能保持100%的高度，不过IE6不支持MIN-HEIGHT,所以同时也设置height:100%还有一个就是关于IE6下的bug，所以添加了
height:auto !important;此外我们还需要设置它的相对定位，以便于你们进行绝对定位后该容器不会跑了
3、contian他必须设置padding_bottom,其大小就是footer的高度
4、就是footer，它的高度就是 上面contain的padding_bottom.然后将其设为绝对定位，同时bottom为0，这样它就就页底了
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。
缺点：
不足之处就是需要给div#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将div#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）div#footer的高度，才能正常运行。
方法二：
<style>
html,body{ margin:0; padding:0; height:100%}
.main{ min-height:100%; heiguto !important; height:100%; margin:0 auto;}
.contain{ margin-bottom:200px; background:#30F;}
.footer{ position:absolute; bottom:0; height:200px; background:#06F;width:100%;}
.head{ height:100px; background:#F0F; width:500px; width:100%;}
</style>
<body>
<div class="main">
</div>
<div class="footer">5555</div>
</body>
截图如下：
http://s8/middle/7f95e24bgc3ea4a8327a7&690
原理：
与方法一不同的是方法二和方法三都将FOOTER层放置在大层的外面，与最外面的层同级
1、html和body标签都要设置margin和padding都为0；同时他们的高度也必须设置为100%，这样就可以在容器上设置百分比了
2、：main容器必须设置一个最小高度为100%，这主要使他在内容少的时候也能保持100%的高度，不过IE6不支持MIN-HEIGHT,所以同时也设置height:100%还有一个就是关于IE6下的bug，所以添加了
height:auto !important;
3、contian他必须设置margin_bottom,其大小就是footer的高度
4、就是footer，它的高度就是 上面contain的margin_bottom.然后将其设为绝对定位，同时bottom为0，这样它就就页底了
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。
缺点：
要给footer设置固定值，因此无法让footer部分自适应高度。
方法三：
<style>
html,body{ margin:0; padding:0; height:100%;}
.main{ min-height:100%; height:auto !important; height:100%; margin:0 auto -60px;}
.contain{ background:#0F3;width:100%;}
.push,.footer{ height:60px; background:#96F; clear:both;}
.push{ display:none;}
.head{ width:100%; background:#F03; height:100px;}
</style>
<body>
<div class="main">
</div>
<div class="footer">33333</div>
</body>
截图如下：
http://s8/middle/7f95e24bgc3ea4b58bb17&690
原理： 方法三与方法二都是把footer放置在外面与Mian层同级，在这里方法三在main里面添加了一个空层，push，它必须放置在main里面的最后一层，而且必须为空层，持方法简单
1、html和body标签都要设置margin和padding都为0；同时他们的高度也必须设置为100%，这样就可以在容器上设置百分比了
2、：main容器必须设置一个最小高度为100%，这主要使他在内容少的时候也能保持100%的高度，不过IE6不支持MIN-HEIGHT,所以同时也设置height:100%还有一个就是关于IE6下的bug，所以添加了
height:auto !important; 此外将Mian的margin_bottom设置为footer的高度。
3、就是footer，它的高度就是 上面contain的margin_bottom.此方法不必将footer设为绝对定位，这样它就就页底了
优点：
简单明了，易于理解，兼容所有浏览器。
缺点：
较之前面的两种方法，多使用了一个div.push容器，同样此方法限制了footer部分高度，无法达到自适应高度效果。
如果大家对方法三想了解更多可以点击这里或者直接从DEMO中下载代码自己研究一下。
喜欢
0
赠金笔