CSS怎么让footer定位网页底部，代码是什么

发布时间：2023-10-28 09:18:34 所属栏目：语言来源：

导读：这篇文章主要介绍了CSS怎么让footer固定网页底部，代码是什么相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS怎么让footer固定网页底部，代码是什么文章都会有所收获，下面我们一起

这篇文章主要介绍了CSS怎么让footer固定网页底部，代码是什么相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS怎么让footer固定网页底部，代码是什么文章都会有所收获，下面我们一起来看看吧。

看完这篇文章后决定用第三个方法，其实很想用jq的，方便灵活，咨询了好多老前辈后，得知Js控制DOM在性能上影响比较大，能用css和html解决就不要用js了。
HTML

代码如下复制代码

.........

Footer Section
CSS
html,
body{
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -330px;/*margin-bottom的负值等于footer高度*/
}
.push,
#footer {
height: 330px;
clear:both;
}

html和body标签：html,body标签和前两种方法一样，需要设置“height:100%”并重置“margin”和“padding”为0；
div#container:方法三关键部分就在于div#container的设置，首先需要设置其最小高度（min-height）为100％,为了能兼容好IE6，需要对min-height进行兼容处理另外这里还有一个关键点在div#container容器上需要设置一个margin-bottom，并且给其取负值，而且值的大小等于div#footer和div.push的高度，如果div#footer和div.push设置了padding和border值，那么div#container的margin-bottom负值需要加上div#footer和div.push的padding和border值。也就是说“div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}”。一句话说：div#container的margin-bottom负值需要和div#footer以及div.push的高度一致；

div.push:在div.push中我们不应该放置任何内容，而且这个div必须放置在div#container容器中，而且是最底部，并且需要设置其高度值等于div#footer的值，最好加上clear:both来清除浮动。div.push容器在此处所起的作用就是将footer往下推。

div#footer容器：div#footer容器和方法二一样，不能放到div#container内部，而和div#container容器同级，如果需要设置元素和footer之间的间距，最好使用padding来代替margin值。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!