Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css把底部footer固定在页面底部

css把底部footer固定在页面底部

发布时间:2020-05-07   编辑:www.jquerycn.cn
jquery中文网为您提供css把底部footer固定在页面底部等资源,欢迎您收藏本站,我们将为您提供最新的css把底部footer固定在页面底部资源
固定在页面底部只要用到绝对定位了这个效果比定位在左边或右边要简单的多了我们来看看css把底部footer固定在页面底部的例子。

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

 代码如下 复制代码

<div id="container">
<div>.........</div>
&nbsp;
<div class="push"><!-- not put anything here --></div>
</div>
&nbsp;
<div id="footer">Footer Section</div>
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的高度一致(如果有padding或border时,高度值需要加上他们);
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值。

您可能感兴趣的文章:
基于jquery的跟随屏幕滚动代码
jQuery判断div随滚动条滚动到一定位置后停止
网页中返回顶部代码(多种方法)另附注释说明
让你的博客飘雪花超出屏幕依然看得见
jquery 跳到顶部和底部动画2句代码简单实现
jQuery底部横幅提示插件 Meerkat
jQuery底部横幅提示插件 Meerkat
jQuery创建平滑的页面滚动(顶部或底部)
返回页面顶部及去页面底部的js实现代码
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果

[关闭]