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

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里写第一种,如有一屏展示的特殊情况,可用样式冲掉。

 

效果图:

技术分享

 



以上是关于关于页面最外层布局及样式的主要内容,如果未能解决你的问题,请参考以下文章

布局页面

网页布局及响应式

请教几个关于dotnetbar控件方面的问题。

动画及阴影

CSS类名命名规则

CSS类名命名规则