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,很明白,相对元素本该位置的偏移量
CSS Code复制内容到剪贴板- #nav{
- position:relative;
- top:15px;
- left:20px;
- }
position:absolute,这时候元素已经脱离了文档,文档中已经没有自己的本该的位置了,但我们可以通过left、bottom、left和right来规定其在文档中位置。
CSS Code复制内容到剪贴板- #nav{
- postion:absolute;
- botton:0px;
- }
我们知道万物都是相对的,元素进行上面设置了后就保证nav元素始终保持在底部了呢?nav元素离botton为0px,是哪个为参照物呢,是父级元素还还是浏览器呢,其实这里分为两种情况:
如果父级元素(父级元素的父级、父级的父级的父级......)设置postion时,则子元素此时相对的是父级的,所以当内容过多时,脚DIV不能被挤到底部去。
如果父级元素(父级元素的父级、父级的父级的父级......)没有设置postion时,则子元素此时相对的是浏览器的,所以当内容过少时,脚DIV不能被挤到底部去。
好了,下面回到正题,同样需要保持html和body的高度相同,并且body需要添加另外的一些样式,footer需要使用绝对定位。
CSS Code复制内容到剪贴板- 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高度相等或稍大的下边距。
div,CSS,页脚
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]