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