品字布局是指在一個網(wǎng)頁中呈現(xiàn)出一個像品字一樣的布局，在中間顯示主要內(nèi)容，兩側(cè)顯示側(cè)邊內(nèi)容或?qū)Ш剑梢允咕W(wǎng)站具有良好的可用性和視覺效果。下面我們來通過 CSS 實現(xiàn)一個滿屏的品字布局。

body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
.content {
display: flex;
width: 100%;
flex-direction: row;
}
.sidebar {
width: 240px;
height: 100%;
background-color: #f1f1f1;
}
.main {
flex: 1;
height: 100vh;
background-color: #fff;
}
.footer {
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}

以上代碼實現(xiàn)了一個基本的品字布局，其中 header 和 footer 分別代表頁面的頂部和底部，使用了固定的高度和背景顏色。content 使用了 flexbox 布局，將 sidebar 和 main 水平排列，并且 main 占據(jù)剩余的空間。sidebar 使用了固定寬度和背景顏色，main 使用了剩下的寬度和高度。可以根據(jù)實際需求設(shè)置 sidebar 和 main 的寬度和高度。