最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css把底部footer固定在页面底部
时间:2022-06-25 08:57:15 编辑:袖梨 来源:一聚教程网
看完这篇文章后决定用第三个方法,其实很想用jq的,方便灵活,咨询了好多老前辈后,得知Js控制DOM在性能上影响比较大,能用css和html解决就不要用js了。
HTML
| 代码如下 | 复制代码 |
|
.........
CSS html, |
|
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值。
相关文章
- 抖音官方充值入口-抖音充值活动任务奖励领取入口 12-18
- 哔哩哔哩在线免费畅看-2025哔哩哔哩b站网页版最新入口速览 12-18
- 一人之下漫画免费在线观看入口 | 实时缓存无延迟,网页直读免下载 12-18
- 免费PPT成品网站直播推荐-超全免费PPT模板网站盘点 12-18
- 学信网查学历-官方学历查询入口(一键验证学历信息) 12-18
- 虫虫漫画-免费漫画观看入口_海量正版漫画在线畅读平台 12-18