css布局-内容自适应屏幕
程序员文章站
2022-03-17 11:57:20
css页面布局实现，内容部分自适应屏幕，当内容高度小于浏览器窗口高度时，页脚在浏览器窗口底部；当内容高度高于浏览器窗口高度时，页脚自动被撑到窗口底部。 css如下： html如下： 通过改变red的高度，来模拟不同内容高度下，页脚的位置。 ......
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的高度，来模拟不同内容高度下，页脚的位置。