css如何實現(xiàn)全屏布局

這篇文章主要介紹了css如何實現(xiàn)全屏布局，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

全屏布局

經(jīng)典的全屏布局由頂部、底部和主體三部分組成，其特點為三部分左右滿屏拉伸、頂部底部高度固定和主體高度自適應(yīng)。該布局很常見，也是大部分Web應(yīng)用主體的主流布局。通常使用<header>、<footer>和<main>三個標(biāo)簽語義化排版，<main>內(nèi)還可插入<aside>側(cè)欄或其他語義化標(biāo)簽。

<div class="fullscreen-layout">
    <header></header>
    <main></main>
    <footer></footer>
</div>

position + left/right/top/bottom

三部分統(tǒng)一聲明left:0和right:0將其左右滿屏拉伸；頂部和底部分別聲明top:0和bottom:0將其吸頂和吸底，并聲明倆高度為固定值；將主體的top和bottom分別聲明為頂部高度和底部高度。通過絕對定位的方式將三部分固定在特定位置，使其互不影響。

.fullscreen-layout {
    position: relative;
    width: 400px;
    height: 400px;
    header,
    footer,
    main {
        position: absolute;
        left: 0;
        right: 0;
    }
    header {
        top: 0;
        height: 50px;
        background-color: #f66;
    }
    footer {
        bottom: 0;
        height: 50px;
        background-color: #66f;
    }
    main {
        top: 50px;
        bottom: 50px;
        background-color: #3c9;
    }
}

flex

使用flex實現(xiàn)會更簡潔。display:flex默認(rèn)會令子節(jié)點橫向排列，需聲明flex-direction:column改變子節(jié)點排列方向為縱向排列；頂部和底部高度固定，所以主體需聲明flex:1讓高度自適應(yīng)。

.fullscreen-layout {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 400px;
    header {
        height: 50px;
        background-color: #f66;
    }
    footer {
        height: 50px;
        background-color: #66f;
    }
    main {
        flex: 1;
        background-color: #3c9;
    }
}

若<main>需表現(xiàn)成可滾動狀態(tài)，千萬不要聲明overflow:auto讓容器自適應(yīng)滾動，這樣做有可能因為其他格式化上下文的影響而導(dǎo)致自適應(yīng)滾動失效或產(chǎn)生其他未知效果。需在<main>內(nèi)插入一個<div>并聲明如下。

div {
    overflow: hidden;
    height: 100%;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何實現(xiàn)全屏布局”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!