情况一：
内容不足一屏时使父级背景铺满一屏，内容过高时，父级背景被内容撑开：
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里写第一种，如有一屏展示的特殊情况，可用样式冲掉。
效果图：
时间： 2024-10-12 23:45:30