标签：round eee 页面 分享 margin img htm code body
情况一：
内容不足一屏时使父级背景铺满一屏，内容过高时，父级背景被内容撑开：
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里写第一种，如有一屏展示的特殊情况，可用样式冲掉。
效果图：
标签：round eee 页面 分享 margin img htm code body
原文地址：http://www.cnblogs.com/uno1990/p/7374621.html
