css布局-內容自適應屏幕

本文轉載自查看原文 2019-02-27 15:04 702 css/ 頁面布局

css頁面布局，實現內容部分自適應屏幕，當內容高度小於瀏覽器窗口高度時，頁腳在瀏覽器窗口底部；當內容高度高於瀏覽器窗口高度時，頁腳自動被撐到頁面底部。

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html,
    body {
        width: 100%;
        height: 100%;
    }
    .main {
        overflow: hidden;
        position: relative;
        min-height: 100%;
        background: #eee;
    }
    .red {
        margin-bottom: 50px;
        height: 200px;
        background: #f00;
    }
    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 50px;
        width: 100%;
        background: #0f0;
    }
</style>
<body>
    <div class="main">
        <div class="red"></div>       
        <div class="footer"></div>     
    </div> 
</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css自適應布局 CSS 自適應布局 CSS 屏幕大小自適應 css 多欄自適應布局 css多欄自適應布局 CSS布局之-高度自適應 css常見自適應布局 WPF 自適應屏幕布局 android控件布局自動自適應屏幕 css實現自適應屏幕高度；