关于页面最外层布局及样式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于页面最外层布局及样式相关的知识,希望对你有一定的参考价值。
情况一:
内容不足一屏时使父级背景铺满一屏,内容过高时,父级背景被内容撑开:
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里写第一种,如有一屏展示的特殊情况,可用样式冲掉。
效果图:
以上是关于关于页面最外层布局及样式的主要内容,如果未能解决你的问题,请参考以下文章