关于页面最外层布局及样式

最新推荐文章于 2021-09-16 11:09:26 发布

weixin_30242907

最新推荐文章于 2021-09-16 11:09:26 发布

阅读量315

点赞数

原文链接：http://www.cnblogs.com/uno1990/p/7374621.html

版权

情况一：

内容不足一屏时使父级背景铺满一屏，内容过高时，父级背景被内容撑开：

HTML:
<body>
　　<div class="container">
   　　<div class="content">
      　　<!-- 内容 -->
      </div>
   </div>
</body>

CSS:
html, body {
    height: 100%;
    background-color: #ccc;
}
.container {
    height: calc(100% - 20px);
    padding: 10px;
    padding-bottom: 0;
}
.content {
    background-color: #fff;
    height: auto;
    margin-bottom: 10px;
    min-height: 100%;
}

情况二：

如果只需要一屏展示，假如里面内容每块高度需要占比50%，则按照下面布局和样式：

HTML:
<body>
        <div class="container">
            <div class="content">
                <!-- 内容 -->
                <div class="box1"></div>
                <div class="box2"></div>
            </div>
        </div>
    </body>

CSS:
html, body {
                height: 100%;
                background-color: #ccc;
            }
            .container {
                height: calc(100% - 20px);
                padding: 10px;
                padding-bottom: 0;
            }
            .content {
                background-color: #fff;
                height: 100%;
                margin-bottom: 10px;
            }
            .box1 {
                height: 50%;
                background-color: #eee;
            }

情况三：

实际项目开发中，通常在公共common里写第一种，如有一屏展示的特殊情况，可用样式冲掉。

效果图：

转载于:https://www.cnblogs.com/uno1990/p/7374621.html

weixin_30242907

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于页面最外层布局及样式

情况一：内容不足一屏时使父级背景铺满一屏，内容过高时，父级背景被内容撑开：HTML:<body>　　<div class="container"> 　　<div class="content"> 　　 </div> </div>&l...
复制链接

扫一扫