css布局-内容自适应屏幕

2018-10-26 05:28:05来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

css如下:

 

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

html如下:

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

 

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css实现垂直居中

下一篇:CSS中字距,词距,首行缩进,字体大小,排版相关问题的探讨