css如何實現全屏布局

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

全屏布局

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

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

position + left/right/top/bottom

三部分統一聲明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實現會更簡潔。display:flex默認會令子節點橫向排列，需聲明flex-direction:column改變子節點排列方向為縱向排列；頂部和底部高度固定，所以主體需聲明flex:1讓高度自適應。

.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>需表現成可滾動狀態，千萬不要聲明overflow:auto讓容器自適應滾動，這樣做有可能因為其他格式化上下文的影響而導致自適應滾動失效或產生其他未知效果。需在<main>內插入一個<div>并聲明如下。

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

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