您好,登录后才能下订单哦!
本篇内容介绍了“如何使用div+CSS将页脚始终控制在页面最下方”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度。网页中的元素都是以body最为参考,所以有必要保持html和body的高度相同。
CSS Code复制内容到剪贴板
html,body{height:100%;}
第一种方法:
在body中使用两个容器,包括网页的页脚和另外一部分(container)。设置container的高度为100%;页脚部分使用 负外边距 保持其总是在最下方。
CSS Code复制内容到剪贴板
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;
}
XML/HTML Code复制内容到剪贴板
<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;
}
XML/HTML Code复制内容到剪贴板
<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将页脚始终控制在页面最下方”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。