当前位置： 移动技术网 > IT编程>网页制作>CSS > css布局-内容自适应屏幕

css布局-内容自适应屏幕

2018年10月25日  | 移动技术网IT编程  | 我要评论

      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的高度，来模拟不同内容高度下，页脚的位置。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网