關於頁面最外層布局及樣式
阿新 • • 發佈：2017-08-16
cnblogs padding bottom image 特殊 calc 20px col --
情況一：
內容不足一屏時使父級背景鋪滿一屏，內容過高時，父級背景被內容撐開：
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裏寫第一種，如有一屏展示的特殊情況，可用樣式沖掉。
效果圖：
關於頁面最外層布局及樣式