经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTMLCSS » CSS » 查看文章
css布局-内容自适应屏幕
来源:cnblogs  作者:负数与正数  时间:2018/10/26 9:49:25  对本文有异议

      css页面布局实现,内容部分自适应屏幕,当内容高度小于浏览器窗口高度时,页脚在浏览器窗口底部;当内容高度高于浏览器窗口高度时,页脚自动被撑到窗口底部。

css如下:

 

  1. 1 <style type="text/css">
  2. 2 * {
  3. 3 margin: 0;
  4. 4 padding: 0;
  5. 5 box-sizing: border-box;
  6. 6 }
  7. 7 html,
  8. 8 body {
  9. 9 width: 100%;
  10. 10 height: 100%;
  11. 11 }
  12. 12 .main {
  13. 13 overflow: hidden;
  14. 14 position: relative;
  15. 15 min-height: 100%;
  16. 16 background: #eee;
  17. 17 }
  18. 18 .red {
  19. 19 margin-bottom: 50px;
  20. 20 height: 200px;
  21. 21 background: #f00;
  22. 22 }
  23. 23 .footer {
  24. 24 position: absolute;
  25. 25 bottom: 0;
  26. 26 left: 0;
  27. 27 height: 50px;
  28. 28 width: 100%;
  29. 29 background: #0f0;
  30. 30 }
  31. 31 </style>

html如下:

  1. 1 <body>
  2. 2 <div class="main">
  3. 3 <div class="red"></div>
  4. 4 <div class="footer"></div>
  5. 5 </div>
  6. 6 </body>

 

通过改变red的高度,来模拟不同内容高度下,页脚的位置。

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号