如何使用div+CSS将页脚始终控制在页面最下方

发布时间:2021-08-10 23:42:27 作者:chen
来源:亿速云 阅读:170

本篇内容介绍了“如何使用div+CSS将页脚始终控制在页面最下方”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

tml和body的高度并不一定相同,在内容少的时候,body的高度要小于html,当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候,此时html的高度大于body的高度。网页中的元素都是以body最为参考,所以有必要保持html和body的高度相同。

CSS Code复制内容到剪贴板

  1. html,body{height:100%;}    

第一种方法:
在body中使用两个容器,包括网页的页脚和另外一部分(container)。设置container的高度为100%;页脚部分使用 负外边距 保持其总是在最下方。

CSS Code复制内容到剪贴板

  1. html, body {     

  2.     height:100%;     

  3. }     

  4. .fl {     

  5.     float:left;     

  6.     display:inline;     

  7. }     

  8. #container {     

  9.     width:100%;     

  10.     height:300px;     

  11.     overflow:hidden;     

  12.     height:100%;     

  13.     border-bottom:70px #FFFFFF solid;     

  14. }     

  15. .aside {     

  16.     width:30%;     

  17. }     

  18. .article {     

  19.     width:70%;     

  20. }     

  21. #footer {     

  22.     height:50px;     

  23.     width:100%;     

  24.     clear:both;     

  25.     margin-top:-50px;     

  26.     border-bottom:1px solid #e0e0e0;     

  27.     border-top:1px solid #e0e0e0;     

  28. }    

XML/HTML Code复制内容到剪贴板

  1. <div id="container">     

  2.     <div id="header">     

  3.         <div>     

  4.             <img src="" widthheightalt="" />     

  5.             <div>     

  6.                 <p>fddfv</p>     

  7.                     <p>容量:<span>24M</span>/<span>2G</span></p>     

  8.             </div>     

  9.         </div>     

  10.     </div>     

  11.     <div class="aside fl"> dsfcndsjkcnsd</div>     

  12.     <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>     

  13. </div>     

  14. <div id="footer">footer</div>   

第二种方法:使用绝对定位
这里我们使用到了position属性,让我们先来回顾一下position的基础用法:

  position有四个参数:static  | relative | absolute | fixed

  position:static,意味元素没有被定位,元素会出现在文档本该出现位置,是页面元素默认的定位的方式,一般无需指定,除非想要覆盖之前设置的定位。

  position:relative,很明白,相对元素本该位置的偏移量  

CSS Code复制内容到剪贴板

  1. #nav{   

  2.     position:relative;   

  3.     top:15px;   

  4.     left:20px;        

  5. }      

  position:absolute,这时候元素已经脱离了文档,文档中已经没有自己的本该的位置了,但我们可以通过left、bottom、left和right来规定其在文档中位置。

CSS Code复制内容到剪贴板

  1. #nav{   

  2.     postion:absolute;   

  3.     botton:0px;   

  4. }  

  我们知道万物都是相对的,元素进行上面设置了后就保证nav元素始终保持在底部了呢?nav元素离botton为0px,是哪个为参照物呢,是父级元素还还是浏览器呢,其实这里分为两种情况:

  如果父级元素(父级元素的父级、父级的父级的父级......)设置postion时,则子元素此时相对的是父级的,所以当内容过多时,脚DIV不能被挤到底部去。

  如果父级元素(父级元素的父级、父级的父级的父级......)没有设置postion时,则子元素此时相对的是浏览器的,所以当内容过少时,脚DIV不能被挤到底部去。

好了,下面回到正题,同样需要保持html和body的高度相同,并且body需要添加另外的一些样式,footer需要使用绝对定位。

CSS Code复制内容到剪贴板

  1. body{position:relative;height:auto !important;height:100%;min-height:100%;}     

  2.   

  3. html {     

  4.     height:100%;     

  5. }     

  6. body {     

  7.     margin:0;     

  8.     padding:0;     

  9.     position:relative;     

  10.     height:auto !important;     

  11.     height:100%;     

  12.     min-height:100%;     

  13.     text-align:center;     

  14. }     

  15. .fl {     

  16.     float:left;     

  17.     display:inline;     

  18. }     

  19. #header {     

  20.     width:100%;     

  21.     height:80px;     

  22. }     

  23. #container {     

  24.     width:100%;     

  25.     height:300px;     

  26.     overflow:hidden;     

  27.     border-bottom:#FFFFFF 60px solid;     

  28. }     

  29. .aside {     

  30.     width:30%;     

  31. }     

  32. .article {     

  33.     width:70%;     

  34. }     

  35. #footer {     

  36.     height:50px;     

  37.     position:absolute;     

  38.     width:100%;     

  39.     clear:both;     

  40.     bottombottom:0;     

  41.     left:0;     

  42.     border-bottom:1px solid #e0e0e0;     

  43.     border-top:1px solid #e0e0e0;     

  44. }    

XML/HTML Code复制内容到剪贴板

  1. <div id="header">     

  2.     <div>     

  3.         <img src="" widthheightalt="" />     

  4.         <div>     

  5.             <p>fddfv</p>     

  6.             <p>容量:<span>24M</span>/<span>2G</span></p>     

  7.         </div>     

  8.     </div>     

  9. </div>     

  10. <div id="container" style="border-bottom:#FFFFFF 60px solid;">     

  11.     <div class="aside fl"> dsfcndsjkcnsd</div>     

  12.     <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>     

  13. </div>     

  14. <div id="footer">footer</div>    

简单总结

第一种方式,不论内容占据的空间相对浏览器视口多高,浏览器侧面的滚动条总是会出现。第二种则使用了 !importent,但是侧面的滚动条旨在需要的时候出现。两种方法的共同点是都有一个比footer高度相等或稍大的下边距。

“如何使用div+CSS将页脚始终控制在页面最下方”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. C#:设置richTextBox的垂直滚动条始终处于最底部
  2. css如何实现页面内容不够高footer始终位于页面的最底部效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

div css

上一篇:CSS中的z-index属性在层叠布局中的用法

下一篇:如何使用CSS3设计地图上的雷达定位提示效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》