使用div+CSS将页脚始终控制在页面最下方的方法
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度。网页中的元素都是以body最为参考,所以有必要保持html和body的高度相同。
- html,body{height:100%;}
第一种方法:
在body中使用两个容器,包括网页的页脚和另外一部分(container)。设置container的高度为100%;页脚部分使用 负外边距 保持其总是在最下方。
- html, body {
- height:100%;
- }
- .fl {
- float:left;
- display:inline;
- }
- #container {
- width:100%;
- height:300px;
- overflow:hidden;
- height:100%;
- border-bottom:70px #FFFFFF solid;
- }
- .aside {
- width:30%;
- }
- .article {
- width:70%;
- }
- #footer {
- height:50px;
- width:100%;
- clear:both;
- margin-top:-50px;
- border-bottom:1px solid #e0e0e0;
- border-top:1px solid #e0e0e0;
- }
- <div id="container">
- <div id="header">
- <div>
- <img src="" width= height= alt="" />
- <div>
- <p>fddfv</p>
- <p>容量:<span>24M</span>/<span>2G</span></p>
- </div>
- </div>
- </div>
- <div class="aside fl"> dsfcndsjkcnsd</div>
- <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>
- </div>
- <div id="footer">footer</div>
第二种方法:使用绝对定位
这里我们使用到了position属性,让我们先来回顾一下position的基础用法:
position有四个参数:static | relative | absolute | fixed
position:static,意味元素没有被定位,元素会出现在文档本该出现位置,是页面元素默认的定位的方式,一般无需指定,除非想要覆盖之前设置的定位。
position:relative,很明白,相对元素本该位置的偏移量
- #nav{
- position:relative;
- top:15px;
- left:20px;
- }
position:absolute,这时候元素已经脱离了文档,文档中已经没有自己的本该的位置了,但我们可以通过left、bottom、left和right来规定其在文档中位置。
- #nav{
- postion:absolute;
- botton:0px;
- }
我们知道万物都是相对的,元素进行上面设置了后就保证nav元素始终保持在底部了呢?nav元素离botton为0px,是哪个为参照物呢,是父级元素还还是浏览器呢,其实这里分为两种情况:
如果父级元素(父级元素的父级、父级的父级的父级......)设置postion时,则子元素此时相对的是父级的,所以当内容过多时,脚DIV不能被挤到底部去。
如果父级元素(父级元素的父级、父级的父级的父级......)没有设置postion时,则子元素此时相对的是浏览器的,所以当内容过少时,脚DIV不能被挤到底部去。
好了,下面回到正题,同样需要保持html和body的高度相同,并且body需要添加另外的一些样式,footer需要使用绝对定位。
- body{position:relative;height:auto !important;height:100%;min-height:100%;}
- html {
- height:100%;
- }
- body {
- margin:0;
- padding:0;
- position:relative;
- height:auto !important;
- height:100%;
- min-height:100%;
- text-align:center;
- }
- .fl {
- float:left;
- display:inline;
- }
- #header {
- width:100%;
- height:80px;
- }
- #container {
- width:100%;
- height:300px;
- overflow:hidden;
- border-bottom:#FFFFFF 60px solid;
- }
- .aside {
- width:30%;
- }
- .article {
- width:70%;
- }
- #footer {
- height:50px;
- position:absolute;
- width:100%;
- clear:both;
- bottombottom:0;
- left:0;
- border-bottom:1px solid #e0e0e0;
- border-top:1px solid #e0e0e0;
- }
- <div id="header">
- <div>
- <img src="" width= height= alt="" />
- <div>
- <p>fddfv</p>
- <p>容量:<span>24M</span>/<span>2G</span></p>
- </div>
- </div>
- </div>
- <div id="container" style="border-bottom:#FFFFFF 60px solid;">
- <div class="aside fl"> dsfcndsjkcnsd</div>
- <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>
- </div>
- <div id="footer">footer</div>
简单总结
第一种方式,不论内容占据的空间相对浏览器视口多高,浏览器侧面的滚动条总是会出现。第二种则使用了 !importent,但是侧面的滚动条旨在需要的时候出现。两种方法的共同点是都有一个比footer高度相等或稍大的下边距。
相关文章
- 这篇文章主要介绍了css三种实现div在浏览器水平居中的方法,感兴趣的小伙伴们可以参考一下2016-04-14
- 下面小编就为大家带来一篇一个div在浏览器水平居中的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。2016-04-14
- 这篇文章主要介绍了div+CSS制作类似微信对话气泡效果的实例总结,文中总结出了四种编写方式,并且对三角形的绘制有一个补充说明,需要的朋友可以参考下2016-04-01
- EXCEL表格中的#DIV/0!等符号怎么全部当计算呢?excel表格中出现了很多符号,比如显示#DIV/0!#N/,在计算的时候会造成很多困扰,该怎么办呢?今天我们就来将#DIV/0!等符2016-03-27
- 下面小编就为大家带来一篇让DIV水平垂直居中的两种完美方法推荐。一起跟随小编过来看看吧。希望给大家一个参考2016-03-15
- 学习DIV+CSS网页布局中的混合布局,本文为大家分享的是DIV+CSS网页布局教程的第四篇,感兴趣的小伙伴们可以参考一下2016-03-15
- 学习DIV+CSS网页布局中的三列布局,本文为大家分享的是DIV+CSS网页布局教程的第三篇,感兴趣的小伙伴们可以参考一下2016-03-15
- 学习DIV+CSS网页布局中的两列布局,本文为大家分享的是DIV+CSS网页布局教程的第二篇,感兴趣的小伙伴们可以参考一下2016-03-15
- 学习DIV+CSS网页布局中的一列布局,本文为大家分享的是DIV+CSS网页布局教程的第一篇,感兴趣的小伙伴们可以参考一下2016-03-15
- 这篇文章主要介绍了Div+CSS对HTML的table表格定位用法实例,文中讲到了CSS的定位差异问题需要的朋友可以参考下2016-03-11
最新评论