css布局-内容自适应屏幕

最新推荐文章于 2024-06-25 22:50:37 发布

「已注销」

最新推荐文章于 2024-06-25 22:50:37 发布

阅读量489

点赞数

分类专栏：前端文章标签： css 页面布局

原文链接：https://www.mk2048.com/blog/blog.php?id=baa2hb0iab&title=css%E5%B8%83%E5%B1%80-%E5%86%85%E5%AE%B9%E8%87%AA%E9%80%82%E5%BA%94%E5%B1%8F%E5%B9%95

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

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

更多专业前端知识，请上【猿2048】www.mk2048.com

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局-内容自适应屏幕

css页面布局实现，内容部分自适应屏幕，当内容高度小于浏览器窗口高度时，页脚在浏览器窗口底部；当内容高度高于浏览器窗口高度时，页脚自动被撑到页面底部。 css如下： 1 <style ...
复制链接

扫一扫

专栏目录