關於頁面最外層佈局及樣式

時間 2019-12-08

標籤關於頁面外層佈局樣式简体版

原文原文鏈接

狀況一：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%;
}

狀況二： spa

若是隻須要一屏展現，假如裏面內容每塊高度須要佔比50%，則按照下面佈局和樣式：code

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;
            }