分享 42 個常用前端布局方案，建議收藏
對 CSS 布局掌握程度決定你在Web開發(fā)中的開發(fā)頁面速度。隨著Web技術(shù)的不斷革新，實現(xiàn)各種布局的方式已經(jīng)多得數(shù)不勝數(shù)了。
本篇文章總結(jié)了四十二種CSS的常見布局，這四十二種布局可以細分為如下幾類：
-
水平居中 -
垂直居中 -
水平垂直居中 -
兩列布局 -
三列布局 -
等分布局 -
Sticky Footer布局 -
全屏布局
這些內(nèi)容也正是本篇文章的目錄。
水平居中
實現(xiàn)水平布局比較簡單，方法也比較多，這里總結(jié)了7種常用的布局方法，其公共的CSS代碼如下所示：
.parent { background: #ff8787; }
.child { height: 300px; width: 300px; background: #e599f7; }
其 HTML 結(jié)構(gòu)也是固定的，就是一個父級，其寬度繼承了 <body> 的寬度，還有一個子級，這里是固定的300px*300px，代碼如下：
<div class="parent">
<div class="child"></div>
</div>
最終的實現(xiàn)效果如下：
上圖中玫瑰色的塊是父級，隨頁面寬度增加的；淡紫色是子級，相對于父級居中的。
1. 使用text-align屬性
若元素為行內(nèi)塊級元素，也就是 display: inline-block 的元素，可以通過為其父元素設(shè)置t ext-align: center 實現(xiàn)水平居中。實現(xiàn)的CSS代碼如下：
.parent {
/* 對于子級為 display: inline-block; 可以通過 text-align: center; 實現(xiàn)水平居中 */
text-align: center;
}
.child {
display: inline-block;
}
2. 定寬塊級元素水平居中(方法一)
對于定寬的的塊級元素實現(xiàn)水平居中，最簡單的一種方式就是 margin: 0 auto;，但是值得注意的是一定需要設(shè)置寬度。實現(xiàn) CSS 代碼如下：
.child {
/* 對于定寬的子元素，直接 margin:0 auto; 即可實現(xiàn)水平居中 */
margin: 0 auto;
}
3. 定寬塊級元素水平居中(方法二)
對于開啟定位的元素，可以通過 left 屬性 和 margin 實現(xiàn)。實現(xiàn)CSS代碼如下：
.child {
/* 開啟定位 */
position: relative;
left: 50%;
/* margin-left 為 負的寬度的一半 */
margin-left: -150px;
}
4. 定寬塊級元素水平居中(方法三)
當元素開啟決定定位或者固定定位時， left 屬性和 right 屬性一起設(shè)置就會拉伸元素的寬度，在配合 width 屬性與 margin 屬性就可以實現(xiàn)水平居中。
實現(xiàn) CSS 代碼如下：
.parent {
position: relative;
height: 300px;
}
.child {
/* 開啟定位 父相子絕 */
position: absolute;
/* 水平拉滿屏幕 */
left: 0;
right: 0;
width: 300px;
/* 拉滿屏幕之后設(shè)置寬度，最后通過 margin 實現(xiàn)水平居中 */
margin: auto;
}
5. 定寬塊級元素水平居中(方法四)
當元素開啟決定定位或者固定定位時， left 屬性和 transform 屬性即可實現(xiàn)水平居中。
實現(xiàn)CSS代碼如下：
.parent {
position: relative;
}
.child {
/* 開啟定位 */
position: absolute;
/* 該方法類似于 left 于 -margin 的用法，但是該方法不需要手動計算寬度。 */
left: 50%;
transform: translateX(-50%);
}
6. Flex方案
通過 Flex 可以有很多方式實現(xiàn)這個居中布局的效果。
實現(xiàn) CSS 代碼如下
.parent {
height: 300px;
/* 開啟 Flex 布局 */
display: flex;
/* 通過 justify-content 屬性實現(xiàn)居中 */
justify-content: center;
}
.child {
/* 或者 子元素 margin: auto*/
margin: auto;
}
7. Grid方案
通過Grid實現(xiàn)居中布局比通過Flex實現(xiàn)的方式更多一些。
實現(xiàn)CSS代碼如下：
.parent {
height: 300px;
/* 開啟 Grid 布局 */
display: grid;
/* 方法一 */
justify-items: center;
/* 方法二 */
justify-content: center;
}
.child {
/* 方法三 子元素 margin: auto*/
margin: auto;
}
以上就是水平居中布局常用的幾種方式。
垂直居中
實現(xiàn)垂直布局也是比較簡單的，方法也比較多，這里總結(jié)了6種常用的布局方法，其公共的 CSS 代碼如下所示：
.parent {
height: 500px;
width: 300px;
margin: 0 auto;
background-color: #ff8787;
}
.child {
width: 300px;
height: 300px;
background-color: #91a7ff;
}
其 HTML 結(jié)構(gòu)也是固定的，就是一個父級包裹一個子級，這里的子級是固定的300px*300px，代碼如下：
<div class="parent">
<div class="child"></div>
</div>
最終的實現(xiàn)效果如下：
1. 行內(nèi)塊級元素垂直居中
若元素是行內(nèi)塊級元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并讓父元素行高等同于高度。
實現(xiàn)CSS代碼如下：
.parent {
/* 為父級容器設(shè)置行高 */
line-height: 500px;
}
.child {
/* 將子級元素設(shè)置為 inline-block 元素 */
display: inline-block;
/* 通過 vertical-align: middle; 實現(xiàn)居中 */
vertical-align: middle;
}
2. 定位方式實現(xiàn)(方法一)
第一種通過定位的方式實現(xiàn)就比較簡單，實際就是通過top: 50%; margin-top: 等于負的高度的一半就可以實現(xiàn)垂直居中。
實現(xiàn)CSS代碼如下：
.parent {
/* 為父級容器開啟相對定位 */
position: relative;
}
.child {
position: absolute;
top: 50%;
/* margin-top: 等于負高度的一半 */
margin-top: -150px;
}
3. 定位方式實現(xiàn)(方法二)
第二種通過定位的方式實現(xiàn)實現(xiàn)思路：top 和 bottom 將子元素拉伸至100%，設(shè)置指定的高度，通過margin:auto;即可實現(xiàn)垂直居中。
實現(xiàn)CSS代碼如下：
.parent {
/* 為父級容器開啟相對定位 */
position: relative;
}
.child {
height: 300px;
position: absolute;
/* 垂直拉滿 */
top: 0;
bottom: 0;
/* margin: auto 即可實現(xiàn) */
margin: auto;
}
4. 定位方式實現(xiàn)(方法三)
第三種通過定位的方式就比較靈活，適用于多種場合，使用 top 配合 tansform 即可。
實現(xiàn)CSS代碼如下：
.parent {
/* 為父級容器開啟相對定位 */
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
5. Flex方案
通過 Flex 可以有很多方式實現(xiàn)這個垂直居中布局的效果。
實現(xiàn)CSS代碼如下：
.parent {
/* 開啟 flex 布局 */
display: flex;
/* 方法一 */
/* align-items: center; */
}
.child {
/* 方法二 */
margin: auto;
}
通過 Flex 布局實現(xiàn)不僅僅只有上面兩種，這里只介紹最簡單的方式。
6. Grid方案
通過 Grid 實現(xiàn)居中布局比通過 Flex 實現(xiàn)的方式更多一些。
實現(xiàn)CSS代碼如下：
.parent {
display: grid;
/* 方法一 */
/* align-items: center; */
/* 方法二 */
/* align-content: center; */
}
.child {
/* 方法三 */
/* margin: auto; */
/* 方法四 */
align-self: center;
}
以上就是垂直居中布局常用的幾種方式。
水平垂直居中
實現(xiàn)水平垂直布局基本就是將上面幾種方式結(jié)合使用，這里總結(jié)了7種常用的布局方法，其公共的 CSS 代碼如下所示：
body {
margin: 0;
}
.parent {
height: 500px;
width: 500px;
background-color: #eebefa;
margin: 0 auto;
}
.child {
height: 300px;
width: 300px;
background-color: #f783ac;
}
其 HTML 結(jié)構(gòu)也是固定的，就是一個父級包裹一個子級，這里的子級是固定的300px*300px，代碼如下：
<div class="parent">
<div class="child"></div>
</div>
最終的實現(xiàn)效果如下：
1. 行內(nèi)塊級水平垂直居中方案
步驟如下：
-
容器元素行高等于容器高度 -
通過 text-align: center; 實現(xiàn)水平居中 -
將子級元素設(shè)置為水平塊級元素 -
通過 vertical-align: middle; 實現(xiàn)垂直居中
實現(xiàn)CSS代碼如下：
.parent {
/* 1. 設(shè)置行高等于容器高度 */
line-height: 500px;
/* 通過 text-align: center; 實現(xiàn)水平居中 */
text-align: center;
}
.child {
/* 將子級元素設(shè)置為水平塊級元素 */
display: inline-block;
/* 通過 vertical-align: middle; 實現(xiàn)垂直居中 */
vertical-align: middle;
}
2. 定位實現(xiàn)水平垂直居中方案(一)
步驟如下：
-
使子元素相對于容器元素定位 -
子元素開啟絕對定位 -
設(shè)置該元素的偏移量，值為50% 減去寬度/高度的一半
實現(xiàn)CSS代碼如下：
.parent {
/* 1. 使子元素相對于本元素定位 */
position: relative;
}
.child {
/* 2. 開啟絕對定位 */
position: absolute;
/* 3. 設(shè)置該元素的偏移量，值為 50%減去寬度/高度的一半 */
left: calc(50% - 150px);
top: calc(50% - 150px);
}
3. 定位實現(xiàn)水平垂直居中方案(二)
步驟如下：
-
使子元素相對于容器元素定位 -
子元素開啟絕對定位 -
設(shè)置該元素的偏移量，值為50% -
通過外邊距-值的方式將元素移動回去
實現(xiàn)CSS代碼如下：
.parent {
/* 1. 使子元素相對于本元素定位 */
position: relative;
}
.child {
/* 2. 開啟絕對定位 */
position: absolute;
/* 3. 設(shè)置該元素的偏移量，值為 50% */
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
4. 定位實現(xiàn)水平垂直居中方案(三)
步驟如下：
-
使子元素相對于容器元素定位 -
子元素開啟絕對定位 -
將子元素拉滿整個容器 -
通過margin:auto實現(xiàn)水平垂直居中
實現(xiàn)CSS代碼如下：
.parent {
/* 1. 使子元素相對于本元素定位 */
position: relative;
}
.child {
/* 2. 開啟絕對定位 */
position: absolute;
/* 3. 將子元素拉滿整個容器 */
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 4. 通過 margin:auto 實現(xiàn)水平垂直居中 */
margin: auto;
}
5. 定位實現(xiàn)水平垂直居中方案(四)
步驟如下：
-
使子元素相對于容器元素定位 -
子元素開啟絕對定位 -
設(shè)置該元素的偏移量，值為50% -
通過 translate反向偏移的方式，實現(xiàn)居中
實現(xiàn) CSS 代碼如下：
.parent {
/* 1. 使子元素相對于本元素定位 */
position: relative;
}
.child {
/* 2. 開啟絕對定位 */
position: absolute;
/* 3. 設(shè)置該元素的偏移量，值為 50%*/
left: 50%;
top: 50%;
/* 通過translate反向偏移的方式，實現(xiàn)居中 */
transform: translate(-50%, -50%);
}
6. Flex方案
步驟如下：
-
將元素設(shè)置為 Flex布局 -
通過 justify-content: center 以及 align-items: center 實現(xiàn)或者 margin: auto; 實現(xiàn)。
實現(xiàn)CSS代碼如下：
.parent {
/* 1. 將元素設(shè)置為 Flex 布局 */
display: flex;
/* 2. 通過 justify-content 以及 align-items: center 實現(xiàn) */
/* justify-content: center;
align-items: center; */
}
.child {
/* 或者通過 margin auto 實現(xiàn) */
margin: auto;
}
7. Grid方案
Grid 方案的實現(xiàn)方式相對來說比較簡單，方式也較多。
實現(xiàn)CSS代碼如下：
.parent {
/* 1. 元素設(shè)置為Grid 元素 */
display: grid;
/* 通過 items 屬性實現(xiàn)*/
/* align-items: center; */
/* justify-items: center; */
/* items 的縮寫 */
/* place-items: center; */
/* 或者通過 content 屬性 */
/* align-content: center; */
/* justify-content: center; */
/* content 的縮寫 */
/* place-content: center; */
}
.child {
/* 或者通過 margin auto 實現(xiàn) */
/* margin: auto; */
/* 或者通過 self 屬性 */
/* align-self: center;
justify-self: center; */
/* self 的縮寫 */
place-self: center;
}
實現(xiàn)水平垂直居中布局的方式大多是通過上面兩種布局的方式相結(jié)合。
兩列布局
所謂的兩列布局就是一列定寬(也有可能由子元素決定寬度)，一列自適應的布局。最終效果如下所示：
這里用到的 HTML 結(jié)構(gòu)如下：
<!-- 解決高度塌陷 -->
<div class="container clearfix">
<div class="left">定寬</div>
<div class="right">自適應</div>
</div>
公共的 CSS 代碼如下:
body {
margin: 0;
}
.container {
height: 400px;
background-color: #eebefa;
}
.left {
height: 400px;
width: 200px;
background-color: #f783ac;
font-size: 70px;
line-height: 400px;
text-align: center;
}
.right {
height: 400px;
background-color: #c0eb75;
font-size: 70px;
line-height: 400px;
}
/* 清除浮動 */
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
1. float+calc()函數(shù)完成左列定寬右列自適應
步驟如下：
-
左邊列開啟浮動 -
右邊列開啟浮動 -
右邊列寬度為父級 100%減去左列的寬度
實現(xiàn)CSS代碼如下：
.left {
/* 左邊列開啟浮動 */
float: left;
}
.right {
/* 右邊列開啟浮動 */
float: left;
/* 寬度減去左列的寬度 */
width: calc(100% - 200px);
}
2. float+margin-left完成左列定寬右列自適應
步驟如下：
-
左邊列開啟浮動
-
通過外邊距的方式使該容器的左邊有左邊列容器的寬度的外邊距
實現(xiàn)CSS代碼如下：
.left {
/* 左邊列開啟浮動 */
float: left;
}
.right {
/* 通過外邊距的方式使該容器的左邊有200px */
margin-left: 200px;
}
3. absolute+margin-left完成左列定寬右列自適應
步驟如下：
-
開啟定位脫離文檔流 -
通過外邊距的方式使該容器的左邊有左邊列容器的寬度的外邊距
實現(xiàn)CSS代碼如下：
.left {
/* 開啟定位脫離文檔流 */
position: absolute;
}
.right {
/* 通過外邊距的方式使該容器的左邊有200px */
margin-left: 200px;
}
值得注意的是 以上幾種方案左邊列必須定寬，才可以實現(xiàn)，下面這幾種方案左邊列可以由子級撐起。
4. float+overflow完成左列定寬右列自適應
步驟如下：
-
左側(cè)元素開始浮動 -
右側(cè)自適應元素設(shè)置overflow會創(chuàng)建一個BFC完成自適應
實現(xiàn)CSS代碼如下：
.left {
/* 1. 左側(cè)元素開始浮動 */
float: left;
}
.right {
/* 2. 右側(cè)自適應元素設(shè)置 overflow 會創(chuàng)建一個BFC 完成自適應 */
overflow: hidden;
}
5. Flex方案
通過Flex布局實現(xiàn)該功能主要是通過 flex 屬性來實現(xiàn)示例代碼如下：
.container {
display: flex;
}
.right {
flex: 1;
/* flex: 1; 表示 flex-grow: 1; 即該項占所有剩余空間 */
}
6. Grid方案
通過 Grid 布局實現(xiàn)該功能主要是通過template屬性實現(xiàn)，具體代碼如下所示：
.container {
display: grid;
/* 將其劃分為兩行，其中一列有本身寬度決定， 一列占剩余寬度*/
grid-template-columns: auto 1fr;
}
三列布局
三列布局主要分為兩種：
-
第一種是前兩列定寬，最后一列自適應，這一種本質(zhì)上與兩列布局沒有什么區(qū)別，可以參照兩列布局實現(xiàn)。 -
第二種是前后兩列定寬，中間自適應，最終效果圖如下
公共 CSS 如下：
body {
margin: 0;
}
.container {
height: 400px;
background-color: #eebefa;
}
.left {
height: 400px;
width: 200px;
background-color: #f783ac;
}
.content {
height: 400px;
background-color: #d9480f;
}
.right {
height: 400px;
width: 200px;
background-color: #c0eb75;
}
.left,
.content,
.right {
font-size: 70px;
line-height: 400px;
text-align: center;
}
/* 清除浮動 */
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
HTML 結(jié)構(gòu)如下：
<!-- 解決高度塌陷 -->
<div class="container clearfix">
<div class="left">左</div>
<div class="content">內(nèi)容</div>
<div class="right">右</div>
</div>
1. 通過float實現(xiàn)(一)
實現(xiàn)步驟：
-
為了完成效果需要調(diào)整HTML結(jié)構(gòu)，調(diào)整后如下：
<!-- 解決高度塌陷 -->
<div class="container clearfix">
<div class="left">左</div>
<div class="right">右</div>
<div class="content">內(nèi)容</div>
</div>
-
左列容器開啟左浮動 -
右列容器開啟右浮動 -
自適應元素設(shè)置overflow會創(chuàng)建一個BFC完成自適應
實現(xiàn)CSS代碼如下
.left {
/* 1. 左列容器開啟左浮動 */
float: left;
}
.content {
/* 自適應元素設(shè)置 overflow 會創(chuàng)建一個BFC 完成自適應 */
overflow: hidden;
}
.right {
/* 2. 右列容器開啟右浮動 */
float: right;
}
2. 通過float實現(xiàn)(二)
實現(xiàn)步驟：
-
為了完成效果需要調(diào)整 HTML 結(jié)構(gòu)，調(diào)整后如下：
<!-- 解決高度塌陷 -->
<div class="container clearfix">
<div class="left">左</div>
<div class="right">右</div>
<div class="content">內(nèi)容</div>
</div>
-
左列容器開啟左浮動 -
右列容器開啟右浮動 -
使中間自適應的寬度為父級容器減去兩個定寬的列
實現(xiàn)CSS代碼如下：
.left {
/* 1. 左列容器開啟左浮動 */
float: left;
}
.content {
/* 3. 使中間自適應的寬度為父級容器減去兩個定寬的列 */
width: calc(100%-400px);
}
.right {
/* 2. 右列容器開啟右浮動 */
float: right;
}
3. 通過position實現(xiàn)
實現(xiàn)步驟
-
左右兩列脫離文檔流，并通過偏移的方式到達自己的區(qū)域 -
使中間自適應的寬度為父級容器減去兩個定寬的列 -
通過外邊距將容器往內(nèi)縮小
實現(xiàn)CSS代碼如下：
.left {
/* 1. 左右兩列脫離文檔流，并通過偏移的方式到達自己的區(qū)域 */
position: absolute;
left: 0;
top: 0;
}
.content {
/* 2. 使中間自適應的寬度為父級容器減去兩個定寬的列 */
width: calc(100%-400px);
/* 3. 通過外邊距將容器往內(nèi)縮小 */
margin-right: 200px;
margin-left: 200px;
}
.right {
position: absolute;
right: 0;
top: 0;
}
4. Flex方案
通過 Flex 布局實現(xiàn)該功能主要是通過 flex 屬性來實現(xiàn)。
實現(xiàn)CSS代碼如下：
.container {
display: flex;
}
.right {
flex: 1;
/* flex: 1; 表示 flex-grow: 1; 即該項占所有剩余空間 */
}
5. Grid方案
通過 Grid 布局實現(xiàn)該功能主要是通過 template 屬性實現(xiàn)。
實現(xiàn)CSS代碼如下：
.container {
display: grid;
/* 將其劃分為兩行，其中一列有本身寬度決定， 一列占剩余寬度*/
grid-template-columns: auto 1fr auto;
}
等分布局
等分布局就是將一個容器平均分成幾等份，這里以 4 等分為例，主要介紹4種方法。
公共CSS部分如下：
body {
margin: 0;
}
.container {
height: 400px;
background-color: #eebefa;
}
.item {
height: 100%;
}
.item1 {
background-color: #eccc68;
}
.item2 {
background-color: #a6c1fa;
}
.item3 {
background-color: #fa7d90;
}
.item4 {
background-color: #b0ff70;
}
/* 清除浮動 */
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
公共HTML代碼如下：
<!-- 父元素清除浮動 -->
<div class="container clearfix">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
最終的效果如下圖所示：
1. 浮動+百分比方式
這種方式比較簡單，開啟浮動，使每個元素占25%的寬度。
實現(xiàn)CSS代碼如下：
.item {
/* 開啟浮動，每個元素占 25% 的寬度 */
width: 25%;
float: left;
}
2. 行內(nèi)塊級+百分比方式
這種方式與上面那種方式類似，不過需要注意的是行內(nèi)塊級元素有一些類似于邊距的幾個像素，導致各25%會超出容器。
實現(xiàn)CSS代碼如下：
.item {
/* 設(shè)置每個元素為行內(nèi)塊級元素，每個元素占 24.5% 的寬度 */
width: 24.5%;
/* 因為行內(nèi)塊級元素有一些類似于邊距的幾個像素，導致各占25會超出容器 */
display: inline-block;
}
3. Flex方案
通過 Flex 布局實現(xiàn)該功能主要是通過 flex 屬性來實現(xiàn)。
實現(xiàn)CSS代碼如下：
.container {
/* 開啟 flex 布局 */
display: flex;
}
.item {
/* 每個元素占相同的寬度 */
flex: 1;
}
4. Grid方案
通過 Grid 布局實現(xiàn)該功能主要是通過 template 屬性實現(xiàn)。
實現(xiàn)CSS代碼如下
.container {
/* 開啟 grid 布局 */
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 使用 repeat 函數(shù)生成如下代碼 */
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
}
Sticky Footer布局
所謂的 Sticky Footer 布局并不是一種新的前端技術(shù)和概念，它就是一種網(wǎng)頁布局。如果頁面內(nèi)容不夠長時，底部欄就會固定到瀏覽器的底部；如果足夠長時，底部欄就后跟隨在內(nèi)容的后面。如下圖所示：
這里來介紹實現(xiàn)該布局的4種方式
公共的CSS代碼如下：
body {
margin: 0;
}
.container {
height: 400px;
display: flex;
}
.left {
height: 400px;
width: 200px;
background-color: #f759ab;
}
.content {
height: 400px;
background-color: #52c41a;
flex: 1;
}
.right {
height: 400px;
width: 200px;
background-color: #f759ab;
}
.left,
.content,
.right {
font-size: 70px;
line-height: 400px;
text-align: center;
}
.header {
height: 100px;
background-color: #70a1ff;
}
.footer {
height: 100px;
background-color: #ff7a45;
}
.header,
.footer {
line-height: 100px;
font-size: 52px;
text-align: center;
}
公共的HTML如下：
<div class="main">
<div class="header">header</div>
<div class="container">
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
1. 絕對定位的方式
通過絕對定位的方式實現(xiàn)Sticky Footer布局的步驟如下：
-
設(shè)置最外層容器高度為100%； -
讓子元素元素相對于容器元素進行定位，并設(shè)置容器元素最小高度為100%； -
在中間區(qū)域設(shè)置padding-bottom為footer的高度 ； -
底部欄絕對定位，并一直吸附在底部即可實現(xiàn)。
實現(xiàn)CSS代碼如下：
/* 1. 設(shè)置最外層容器為100% */
html,
body {
height: 100%;
}
/* 2. 讓子元素元素相對于容器元素進行定位，并設(shè)置容器元素最小高度為100% */
.main {
position: relative;
min-height: 100%;
}
/* 3. 在中間區(qū)域設(shè)置 padding-bottom 為footer 的高度 */
.container {
padding-bottom: 100px;
}
/* 由于開啟了絕對定位，寬度成了自適應，設(shè)置為100% bottom:0 始終保持底部 */
.footer {
position: absolute;
width: 100%;
bottom: 0;
}
2. 使用calc函數(shù)實現(xiàn)
使用 calc 函數(shù)實現(xiàn)的方式會比較簡單，中間的容器最少高度為視口寬度的100% - 頭部和底部兩部分的高度即可完成該功能。
實現(xiàn)CSS代碼如下：
.container {
/* 這里的 中間 部分的容器最少為視口寬度的 100% - 頭部和底部兩部分的高度即可完成該功能 */
min-height: calc(100vh - 200px);
}
3. Flex方案
實現(xiàn)步驟如下
-
開啟 flex布局 -
將子元素布局方向修改為垂直排列 -
設(shè)置最小高度為當前視口，使不管中間部分有多高，始終都可以保持在底部 -
設(shè)置中間部分容器高度為自適應
實現(xiàn)CSS代碼如下：
.main {
/* 開啟flex布局 */
display: flex;
/* 將子元素布局方向修改為垂直排列 */
flex-flow: column;
/* 設(shè)置最小高度為當前視口，使不管中間部分有多高，始終都可以保持在底部 */
min-height: 100vh;
}
.container {
/* 設(shè)置 中間 部分自適應 */
flex: 1;
}
4. Grid方案
實現(xiàn)步驟如下
-
開啟 grid布局 -
置最小高度為當前視口，使不管中間部分有多高，始終都可以保持在底部
實現(xiàn)CSS代碼如下：
.main {
/* 開啟grid布局 */
display: grid;
grid-template-rows: auto 1fr auto;
/* 設(shè)置最小高度為當前視口，使不管中間部分有多高，始終都可以保持在底部 */
min-height: 100vh;
}
全屏布局
全部布局主要應用在后臺，主要效果如下所示：
這里介紹三種全屏布局的實現(xiàn)方法。
公共的CSS代碼如下：
body {
margin: 0;
}
body,
html,
.container {
height: 100vh;
box-sizing: border-box;
text-align: center;
overflow: hidden;
}
.content {
background-color: #52c41a;
/* * 中間部門的布局可以參考 兩列 三列 布局 */
display: grid;
grid-template-columns: auto 1fr;
}
.left {
width: 240px;
background-color: #52c41a;
font-size: 80px;
line-height: calc(100vh - 200px);
}
.right {
background-color: #f759ab;
font-size: 60px;
}
.header {
height: 100px;
background-color: #70a1ff;
}
.footer {
height: 100px;
background-color: #ff7a45;
}
.header,
.footer {
line-height: 100px;
font-size: 52px;
}
HTML結(jié)構(gòu)如下：
<div class="container">
<div class="header">header</div>
<div class="content">
<div class="left">導航</div>
<div class="right">
<div class="right-in">自適應，超出高度出現(xiàn)滾動條</div>
</div>
</div>
<div class="footer">footer</div>
</div>
1. 使用calc函數(shù)實現(xiàn)
實現(xiàn)步驟如下：
-
通過 calc函數(shù)計算出中間容器的高度。 -
中間出現(xiàn)滾動條的容器設(shè)置overflow: auto即出現(xiàn)滾動條的時候出現(xiàn)滾動條。
實現(xiàn)CSS代碼如下：
.content {
overflow: hidden;
/* 通過 calc 計算容器的高度 */
height: calc(100vh - 200px);
}
.left {
height: 100%;
}
.right {
/* 如果超出出現(xiàn)滾動條 */
overflow: auto;
height: 100%;
}
.right-in {
/* 假設(shè)容器內(nèi)有500px的元素 */
height: 500px;
}
2. Flex 方案
使用 Flex 方式實現(xiàn)該布局比較簡單。
實現(xiàn)CSS代碼如下
.container {
/* 開啟flex布局 */
display: flex;
/* 將子元素布局方向修改為垂直排列 */
flex-flow: column;
}
.content {
/* 如果超出出現(xiàn)滾動條 */
overflow: auto;
/* 設(shè)置 中間 部分自適應 */
flex: 1;
}
.right-in {
/* 假設(shè)容器內(nèi)有500px的元素 */
height: 500px;
}
3. Grid 方案
grid布局對于這種布局來說，實現(xiàn)起來是非常得心應手的，通過template屬性即可實現(xiàn)。
實現(xiàn)CSS代碼如下
.container {
/* 開啟grid布局 */
display: grid;
grid-template-rows: auto 1fr auto;
}
.content {
/* 如果超出出現(xiàn)滾動條 */
overflow: auto;
}
.right-in {
/* 假設(shè)容器內(nèi)有500px的元素 */
height: 500px;
}
作者：一碗周
https://juejin.cn/post/7028962991345254407