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值。

时间： 2024-11-01 04:38:46

css把底部footer固定在页面底部的相关文章

将页脚固定在页面底部的CSS实战

  页脚的位置问题 网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方.页脚自然是应该位于页面底部的,但依照一般的做法,如果位于页脚之前的网页内容比较少,或者说使用了一个垂直分辨率较大的显示器,就有可能出现页脚看起来不在页面底部的情况,如下图. 由于页脚基本上是一个网站的所有页面公用的部分,不同页面的内容量有所差异,因此确实有可能某些页面内容不够而出现这样的问题.另外,尤其是包含了底色的页脚,发生这种问题会很影响美观. 所以,我们希望页脚能够无论网页内容量多少,都准确地位于底

jquery实现页面底部div固定

先说遇到的问题,一个没有满一屏的页面,需要将底部的信息栏固定在下面,并且随着浏览器窗口大小的变化而保持位置始终在底部. 风哥的解决方案, 用jq,直接灭. 一句话,不割, 代码如下:  代码如下 复制代码 $(window).resize(function(){              var h_doc = $(document).height();              var h_foo = h_doc-25;              $('#footer').offset({to

Div固定在浏览器底部兼容ie6的方法

 代码如下 复制代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

javascript/jquery实现div始终在页面底部

代码如下  代码如下 复制代码 <html> <body> <div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;"> <table style="border:1px solid; "> <tr><td>id</td><td>name</td><

公共js在页面底部加载的注意事项介绍

JavaScript脚本文件都放在页面底部加载,可以有效地加快页面的加载速度. 但是,php控制器一般这样写: 复制代码 代码如下: $this->load->view($HEADER); $this->load->view($MENU); $this->load->view($VIEW_SHOW, $data); $this->load->view($FOOTER); $FOOTER是个共用模版,用于加载js及css文件. $VIEW_SHOW作为主模版,

公共js在页面底部加载的注意事项介绍_javascript技巧

JavaScript脚本文件都放在页面底部加载,可以有效地加快页面的加载速度. 但是,php控制器一般这样写: 复制代码 代码如下: $this->load->view($HEADER); $this->load->view($MENU); $this->load->view($VIEW_SHOW, $data); $this->load->view($FOOTER); $FOOTER是个共用模版,用于加载js及css文件. $VIEW_SHOW作为主模版,

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)_jquery

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

fullpage插件怎样设置底部footer，不用position:fixed

问题描述 fullpage插件怎样设置底部footer,不用position:fixed fullpage插件怎样设置底部footer,不用position:fixed,请各位大神们支招,小弟谢过了 解决方案 自己写个footer嘛 . 之前做个一个网站 www.new-mix.com.cn/ 使用fullpage 做的主框架.或许对你有帮助 解决方案二: fullpage就是整个页面了...你不fixed怎么显示..

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨_AJAX相关

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).h