對(duì) CSS 布局掌握程度決定你在Web開發(fā)中的開發(fā)頁面速度。隨著Web技術(shù)的不斷革新，實(shí)現(xiàn)各種布局的方式已經(jīng)多得數(shù)不勝數(shù)了。

本篇文章總結(jié)了四十二種CSS的常見布局，這四十二種布局可以細(xì)分為如下幾類：

• 水平居中
• 垂直居中
• 水平垂直居中
• 兩列布局
• 三列布局
• 等分布局
• Sticky Footer布局
• 全屏布局

這些內(nèi)容也正是本篇文章的目錄。

水平居中

實(shí)現(xiàn)水平布局比較簡單，方法也比較多，這里總結(jié)了7種常用的布局方法，其公共的CSS代碼如下所示：

.parent { background: #ff8787; } .child { height: 300px; width: 300px; background: #e599f7; }

其 HTML 結(jié)構(gòu)也是固定的，就是一個(gè)父級(jí)，其寬度繼承了的寬度，還有一個(gè)子級(jí)，這里是固定的300px*300px，代碼如下：

<div class="parent">
  <div class="child">div>
div>

最終的實(shí)現(xiàn)效果如下：

上圖中玫瑰色的塊是父級(jí)，隨頁面寬度增加的；淡紫色是子級(jí)，相對(duì)于父級(jí)居中的。

1. 使用text-align屬性

若元素為行內(nèi)塊級(jí)元素，也就是 display: inline-block 的元素，可以通過為其父元素設(shè)置t ext-align: center 實(shí)現(xiàn)水平居中。實(shí)現(xiàn)的CSS代碼如下：

.parent { /* 對(duì)于子級(jí)為 display: inline-block; 可以通過 text-align: center; 實(shí)現(xiàn)水平居中 */ text-align: center;
} .child { display: inline-block;
}

2. 定寬塊級(jí)元素水平居中(方法一)

對(duì)于定寬的的塊級(jí)元素實(shí)現(xiàn)水平居中，最簡單的一種方式就是 margin: 0 auto;，但是值得注意的是一定需要設(shè)置寬度。實(shí)現(xiàn) CSS 代碼如下：

.child { /* 對(duì)于定寬的子元素，直接 margin:0 auto; 即可實(shí)現(xiàn)水平居中 */ margin: 0 auto;
}

3. 定寬塊級(jí)元素水平居中(方法二)

對(duì)于開啟定位的元素，可以通過 left 屬性 和 margin 實(shí)現(xiàn)。實(shí)現(xiàn)CSS代碼如下：

.child { /* 開啟定位 */ position: relative; left: 50%; /* margin-left 為 負(fù)的寬度的一半 */ margin-left: -150px;
}

4. 定寬塊級(jí)元素水平居中(方法三)

當(dāng)元素開啟決定定位或者固定定位時(shí)， left 屬性和 right 屬性一起設(shè)置就會(huì)拉伸元素的寬度，在配合 width 屬性與 margin 屬性就可以實(shí)現(xiàn)水平居中。

實(shí)現(xiàn) CSS 代碼如下：

.parent { position: relative; height: 300px;
} .child { /* 開啟定位 父相子絕 */ position: absolute; /* 水平拉滿屏幕 */ left: 0; right: 0; width: 300px; /* 拉滿屏幕之后設(shè)置寬度，最后通過 margin 實(shí)現(xiàn)水平居中 */ margin: auto;
}

5. 定寬塊級(jí)元素水平居中(方法四)

當(dāng)元素開啟決定定位或者固定定位時(shí)， left 屬性和 transform 屬性即可實(shí)現(xiàn)水平居中。

實(shí)現(xiàn)CSS代碼如下：

.parent { position: relative;
} .child { /* 開啟定位 */ position: absolute; /* 該方法類似于 left 于 -margin 的用法，但是該方法不需要手動(dòng)計(jì)算寬度。 */ left: 50%; transform: translateX(-50%);
}

6. Flex方案

通過 Flex 可以有很多方式實(shí)現(xiàn)這個(gè)居中布局的效果。

實(shí)現(xiàn) CSS 代碼如下

.parent { height: 300px; /* 開啟 Flex 布局 */ display: flex; /* 通過 justify-content 屬性實(shí)現(xiàn)居中 */ justify-content: center;
} .child { /* 或者 子元素 margin: auto*/ margin: auto;
}

7. Grid方案

通過Grid實(shí)現(xiàn)居中布局比通過Flex實(shí)現(xiàn)的方式更多一些。

實(shí)現(xiàn)CSS代碼如下：

.parent { height: 300px; /* 開啟 Grid 布局 */ display: grid; /* 方法一 */ justify-items: center; /* 方法二 */ justify-content: center;
} .child { /* 方法三 子元素 margin: auto*/ margin: auto;
}

以上就是水平居中布局常用的幾種方式。

垂直居中

實(shí)現(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)也是固定的，就是一個(gè)父級(jí)包裹一個(gè)子級(jí)，這里的子級(jí)是固定的300px*300px，代碼如下：

<div class="parent">
  <div class="child">div>
div>

最終的實(shí)現(xiàn)效果如下：

1. 行內(nèi)塊級(jí)元素垂直居中

若元素是行內(nèi)塊級(jí)元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并讓父元素行高等同于高度。

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 為父級(jí)容器設(shè)置行高 */ line-height: 500px;
} .child { /* 將子級(jí)元素設(shè)置為 inline-block 元素 */ display: inline-block; /* 通過 vertical-align: middle; 實(shí)現(xiàn)居中 */ vertical-align: middle;
}

2. 定位方式實(shí)現(xiàn)(方法一)

第一種通過定位的方式實(shí)現(xiàn)就比較簡單，實(shí)際就是通過top: 50%; margin-top: 等于負(fù)的高度的一半就可以實(shí)現(xiàn)垂直居中。

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 為父級(jí)容器開啟相對(duì)定位 */ position: relative;
} .child { position: absolute; top: 50%; /* margin-top: 等于負(fù)高度的一半 */ margin-top: -150px;
}

3. 定位方式實(shí)現(xiàn)(方法二)

第二種通過定位的方式實(shí)現(xiàn)實(shí)現(xiàn)思路：top 和 bottom 將子元素拉伸至100%，設(shè)置指定的高度，通過margin:auto;即可實(shí)現(xiàn)垂直居中。

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 為父級(jí)容器開啟相對(duì)定位 */ position: relative;
} .child { height: 300px; position: absolute; /* 垂直拉滿 */ top: 0; bottom: 0; /* margin: auto 即可實(shí)現(xiàn) */ margin: auto;
}

4. 定位方式實(shí)現(xiàn)(方法三)

第三種通過定位的方式就比較靈活，適用于多種場合，使用 top 配合 tansform 即可。

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 為父級(jí)容器開啟相對(duì)定位 */ position: relative;
} .child { position: absolute; top: 50%; transform: translateY(-50%);
}

5. Flex方案

通過 Flex 可以有很多方式實(shí)現(xiàn)這個(gè)垂直居中布局的效果。

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 開啟 flex 布局 */ display: flex; /* 方法一 */ /* align-items: center; */ } .child { /* 方法二 */ margin: auto;
}

通過 Flex 布局實(shí)現(xiàn)不僅僅只有上面兩種，這里只介紹最簡單的方式。

6. Grid方案

通過 Grid 實(shí)現(xiàn)居中布局比通過 Flex 實(shí)現(xiàn)的方式更多一些。

實(shí)現(xiàn)CSS代碼如下：

.parent { display: grid; /* 方法一 */ /* align-items: center; */ /* 方法二 */ /* align-content: center; */ } .child { /* 方法三 */ /* margin: auto; */ /* 方法四 */ align-self: center;
}

以上就是垂直居中布局常用的幾種方式。

水平垂直居中

實(shí)現(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)也是固定的，就是一個(gè)父級(jí)包裹一個(gè)子級(jí)，這里的子級(jí)是固定的300px*300px，代碼如下：

<div class="parent">
  <div class="child">div>
div>

最終的實(shí)現(xiàn)效果如下：

1. 行內(nèi)塊級(jí)水平垂直居中方案

步驟如下：

• 容器元素行高等于容器高度
• 通過 text-align: center; 實(shí)現(xiàn)水平居中
• 將子級(jí)元素設(shè)置為水平塊級(jí)元素
• 通過 vertical-align: middle; 實(shí)現(xiàn)垂直居中

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 1. 設(shè)置行高等于容器高度 */ line-height: 500px; /* 通過 text-align: center; 實(shí)現(xiàn)水平居中 */ text-align: center;
} .child { /* 將子級(jí)元素設(shè)置為水平塊級(jí)元素 */ display: inline-block; /* 通過 vertical-align: middle; 實(shí)現(xiàn)垂直居中 */ vertical-align: middle;
}

2. 定位實(shí)現(xiàn)水平垂直居中方案(一)

步驟如下：

• 使子元素相對(duì)于容器元素定位
• 子元素開啟絕對(duì)定位
• 設(shè)置該元素的偏移量，值為50% 減去寬度/高度的一半

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 1. 使子元素相對(duì)于本元素定位 */ position: relative;
} .child { /* 2. 開啟絕對(duì)定位 */ position: absolute; /* 3. 設(shè)置該元素的偏移量，值為 50%減去寬度/高度的一半 */ left: calc(50% - 150px); top: calc(50% - 150px);
}

3. 定位實(shí)現(xiàn)水平垂直居中方案(二)

步驟如下：

• 使子元素相對(duì)于容器元素定位
• 子元素開啟絕對(duì)定位
• 設(shè)置該元素的偏移量，值為50%
• 通過外邊距-值的方式將元素移動(dòng)回去

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 1. 使子元素相對(duì)于本元素定位 */ position: relative;
} .child { /* 2. 開啟絕對(duì)定位 */ position: absolute; /* 3. 設(shè)置該元素的偏移量，值為 50% */ left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;
}

4. 定位實(shí)現(xiàn)水平垂直居中方案(三)

步驟如下：

• 使子元素相對(duì)于容器元素定位
• 子元素開啟絕對(duì)定位
• 將子元素拉滿整個(gè)容器
• 通過margin:auto實(shí)現(xiàn)水平垂直居中

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 1. 使子元素相對(duì)于本元素定位 */ position: relative;
} .child { /* 2. 開啟絕對(duì)定位 */ position: absolute; /* 3. 將子元素拉滿整個(gè)容器 */ top: 0; left: 0; right: 0; bottom: 0; /* 4. 通過 margin:auto 實(shí)現(xiàn)水平垂直居中 */ margin: auto;
}

5. 定位實(shí)現(xiàn)水平垂直居中方案(四)

步驟如下：

• 使子元素相對(duì)于容器元素定位
• 子元素開啟絕對(duì)定位
• 設(shè)置該元素的偏移量，值為50%
• 通過 translate 反向偏移的方式，實(shí)現(xiàn)居中

實(shí)現(xiàn) CSS 代碼如下：

.parent { /* 1. 使子元素相對(duì)于本元素定位 */ position: relative;
} .child { /* 2. 開啟絕對(duì)定位 */ position: absolute; /* 3. 設(shè)置該元素的偏移量，值為 50%*/ left: 50%; top: 50%; /* 通過translate反向偏移的方式，實(shí)現(xiàn)居中 */ transform: translate(-50%, -50%);
}

6. Flex方案

步驟如下：

• 將元素設(shè)置為 Flex 布局
• 通過 justify-content: center 以及 align-items: center 實(shí)現(xiàn)或者 margin: auto; 實(shí)現(xiàn)。

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 1. 將元素設(shè)置為 Flex 布局 */ display: flex; /* 2. 通過 justify-content 以及 align-items: center 實(shí)現(xiàn) */ /* justify-content: center;  align-items: center; */ } .child { /* 或者通過 margin auto 實(shí)現(xiàn) */ margin: auto;
}

7. Grid方案

Grid 方案的實(shí)現(xiàn)方式相對(duì)來說比較簡單，方式也較多。

實(shí)現(xiàn)CSS代碼如下：

.parent { /* 1. 元素設(shè)置為Grid 元素 */ display: grid; /* 通過 items 屬性實(shí)現(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 實(shí)現(xiàn) */ /* margin: auto; */ /* 或者通過 self 屬性 */ /* align-self: center;  justify-self: center; */ /* self 的縮寫 */ place-self: center;
}

實(shí)現(xiàn)水平垂直居中布局的方式大多是通過上面兩種布局的方式相結(jié)合。

兩列布局

所謂的兩列布局就是一列定寬(也有可能由子元素決定寬度)，一列自適應(yīng)的布局。最終效果如下所示：

這里用到的 HTML 結(jié)構(gòu)如下：

<!-- 解決高度塌陷 -->
<div class="container clearfix">
  <div class="left">定寬div>
  <div class="right">自適應(yīng)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;
} /* 清除浮動(dòng) */ .clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden;
}

1. float+calc()函數(shù)完成左列定寬右列自適應(yīng)

步驟如下：

• 左邊列開啟浮動(dòng)
• 右邊列開啟浮動(dòng)
• 右邊列寬度為父級(jí) 100%減去左列的寬度

實(shí)現(xiàn)CSS代碼如下：

.left { /* 左邊列開啟浮動(dòng) */ float: left;
} .right { /* 右邊列開啟浮動(dòng) */ float: left; /* 寬度減去左列的寬度 */ width: calc(100% - 200px);
}

2. float+margin-left完成左列定寬右列自適應(yīng)

步驟如下：

• 左邊列開啟浮動(dòng)
• 通過外邊距的方式使該容器的左邊有左邊列容器的寬度的外邊距

實(shí)現(xiàn)CSS代碼如下：

.left { /* 左邊列開啟浮動(dòng) */ float: left;
} .right { /* 通過外邊距的方式使該容器的左邊有200px */ margin-left: 200px;
}

3. absolute+margin-left完成左列定寬右列自適應(yīng)

步驟如下：

• 開啟定位脫離文檔流
• 通過外邊距的方式使該容器的左邊有左邊列容器的寬度的外邊距

實(shí)現(xiàn)CSS代碼如下：

.left { /* 開啟定位脫離文檔流 */ position: absolute;
} .right { /* 通過外邊距的方式使該容器的左邊有200px */ margin-left: 200px;
}

值得注意的是 以上幾種方案左邊列必須定寬，才可以實(shí)現(xiàn)，下面這幾種方案左邊列可以由子級(jí)撐起。

4. float+overflow完成左列定寬右列自適應(yīng)

步驟如下：

• 左側(cè)元素開始浮動(dòng)
• 右側(cè)自適應(yīng)元素設(shè)置overflow會(huì)創(chuàng)建一個(gè)BFC完成自適應(yīng)

實(shí)現(xiàn)CSS代碼如下：

.left { /* 1. 左側(cè)元素開始浮動(dòng) */ float: left;
} .right { /* 2. 右側(cè)自適應(yīng)元素設(shè)置 overflow 會(huì)創(chuàng)建一個(gè)BFC 完成自適應(yīng) */ overflow: hidden;
}

5. Flex方案

通過Flex布局實(shí)現(xiàn)該功能主要是通過 flex 屬性來實(shí)現(xiàn)示例代碼如下：

.container { display: flex;
} .right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即該項(xiàng)占所有剩余空間 */ }

6. Grid方案

通過 Grid 布局實(shí)現(xiàn)該功能主要是通過template屬性實(shí)現(xiàn)，具體代碼如下所示：

.container { display: grid; /* 將其劃分為兩行，其中一列有本身寬度決定， 一列占剩余寬度*/ grid-template-columns: auto 1fr;
}

三列布局

三列布局主要分為兩種：

• 第一種是前兩列定寬，最后一列自適應(yīng)，這一種本質(zhì)上與兩列布局沒有什么區(qū)別，可以參照兩列布局實(shí)現(xiàn)。
• 第二種是前后兩列定寬，中間自適應(yīng)，最終效果圖如下

公共 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;
} /* 清除浮動(dòng) */ .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實(shí)現(xiàn)(一)

實(shí)現(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>

• 左列容器開啟左浮動(dòng)
• 右列容器開啟右浮動(dòng)
• 自適應(yīng)元素設(shè)置overflow會(huì)創(chuàng)建一個(gè)BFC完成自適應(yīng)

實(shí)現(xiàn)CSS代碼如下

.left { /* 1. 左列容器開啟左浮動(dòng) */ float: left;
} .content { /* 自適應(yīng)元素設(shè)置 overflow 會(huì)創(chuàng)建一個(gè)BFC 完成自適應(yīng) */ overflow: hidden;
} .right { /* 2. 右列容器開啟右浮動(dòng) */ float: right;
}

2. 通過float實(shí)現(xiàn)(二)

實(shí)現(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>

• 左列容器開啟左浮動(dòng)
• 右列容器開啟右浮動(dòng)
• 使中間自適應(yīng)的寬度為父級(jí)容器減去兩個(gè)定寬的列

實(shí)現(xiàn)CSS代碼如下：

.left { /* 1. 左列容器開啟左浮動(dòng) */ float: left;
} .content { /* 3. 使中間自適應(yīng)的寬度為父級(jí)容器減去兩個(gè)定寬的列 */ width: calc(100%-400px);
} .right { /* 2. 右列容器開啟右浮動(dòng) */ float: right;
}

3. 通過position實(shí)現(xiàn)

實(shí)現(xiàn)步驟

• 左右兩列脫離文檔流，并通過偏移的方式到達(dá)自己的區(qū)域
• 使中間自適應(yīng)的寬度為父級(jí)容器減去兩個(gè)定寬的列
• 通過外邊距將容器往內(nèi)縮小

實(shí)現(xiàn)CSS代碼如下：

.left { /* 1. 左右兩列脫離文檔流，并通過偏移的方式到達(dá)自己的區(qū)域 */ position: absolute; left: 0; top: 0;
} .content { /* 2. 使中間自適應(yīng)的寬度為父級(jí)容器減去兩個(gè)定寬的列 */ width: calc(100%-400px); /* 3. 通過外邊距將容器往內(nèi)縮小 */ margin-right: 200px; margin-left: 200px;
} .right { position: absolute; right: 0; top: 0;
}

4. Flex方案

通過 Flex 布局實(shí)現(xiàn)該功能主要是通過 flex 屬性來實(shí)現(xiàn)。

實(shí)現(xiàn)CSS代碼如下：

.container { display: flex;
} .right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即該項(xiàng)占所有剩余空間 */ }

5. Grid方案

通過 Grid 布局實(shí)現(xiàn)該功能主要是通過 template 屬性實(shí)現(xiàn)。

實(shí)現(xiàn)CSS代碼如下：

.container { display: grid; /* 將其劃分為兩行，其中一列有本身寬度決定， 一列占剩余寬度*/ grid-template-columns: auto 1fr auto;
}

等分布局

等分布局就是將一個(gè)容器平均分成幾等份，這里以 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;
} /* 清除浮動(dòng) */ .clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden;
}

公共HTML代碼如下：

<!-- 父元素清除浮動(dòng) -->
<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. 浮動(dòng)+百分比方式

這種方式比較簡單，開啟浮動(dòng)，使每個(gè)元素占25%的寬度。

實(shí)現(xiàn)CSS代碼如下：

.item { /* 開啟浮動(dòng)，每個(gè)元素占 25% 的寬度 */ width: 25%; float: left;
}

2. 行內(nèi)塊級(jí)+百分比方式

這種方式與上面那種方式類似，不過需要注意的是行內(nèi)塊級(jí)元素有一些類似于邊距的幾個(gè)像素，導(dǎo)致各25%會(huì)超出容器。

實(shí)現(xiàn)CSS代碼如下：

.item { /* 設(shè)置每個(gè)元素為行內(nèi)塊級(jí)元素，每個(gè)元素占 24.5% 的寬度 */ width: 24.5%; /* 因?yàn)樾袃?nèi)塊級(jí)元素有一些類似于邊距的幾個(gè)像素，導(dǎo)致各占25會(huì)超出容器 */ display: inline-block;
}

3. Flex方案

通過 Flex 布局實(shí)現(xiàn)該功能主要是通過 flex 屬性來實(shí)現(xiàn)。

實(shí)現(xiàn)CSS代碼如下：

.container { /* 開啟 flex 布局 */ display: flex;
} .item { /* 每個(gè)元素占相同的寬度 */ flex: 1;
}

4. Grid方案

通過 Grid 布局實(shí)現(xiàn)該功能主要是通過 template 屬性實(shí)現(xiàn)。

實(shí)現(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)容不夠長時(shí)，底部欄就會(huì)固定到瀏覽器的底部；如果足夠長時(shí)，底部欄就后跟隨在內(nèi)容的后面。如下圖所示：

這里來介紹實(shí)現(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">headerdiv>
    <div class="container">
        <div class="left">leftdiv>
        <div class="content">contentdiv>
        <div class="right">rightdiv>
    div>
    <div class="footer">footerdiv>
div>

1. 絕對(duì)定位的方式

通過絕對(duì)定位的方式實(shí)現(xiàn)Sticky Footer布局的步驟如下：

• 設(shè)置最外層容器高度為100%；
• 讓子元素元素相對(duì)于容器元素進(jìn)行定位，并設(shè)置容器元素最小高度為100%；
• 在中間區(qū)域設(shè)置padding-bottom為footer的高度 ；
• 底部欄絕對(duì)定位，并一直吸附在底部即可實(shí)現(xiàn)。

實(shí)現(xiàn)CSS代碼如下：

/* 1. 設(shè)置最外層容器為100% */ html, body { height: 100%;
} /* 2. 讓子元素元素相對(duì)于容器元素進(jìn)行定位，并設(shè)置容器元素最小高度為100% */ .main { position: relative; min-height: 100%;
} /* 3. 在中間區(qū)域設(shè)置 padding-bottom 為footer 的高度 */ .container { padding-bottom: 100px;
} /* 由于開啟了絕對(duì)定位，寬度成了自適應(yīng)，設(shè)置為100% bottom:0 始終保持底部 */ .footer { position: absolute; width: 100%; bottom: 0;
}

2. 使用calc函數(shù)實(shí)現(xiàn)

使用 calc 函數(shù)實(shí)現(xiàn)的方式會(huì)比較簡單，中間的容器最少高度為視口寬度的100% - 頭部和底部兩部分的高度即可完成該功能。

實(shí)現(xiàn)CSS代碼如下：

.container { /* 這里的 中間 部分的容器最少為視口寬度的 100% - 頭部和底部兩部分的高度即可完成該功能 */ min-height: calc(100vh - 200px);
}

3. Flex方案

實(shí)現(xiàn)步驟如下

• 開啟 flex 布局
• 將子元素布局方向修改為垂直排列
• 設(shè)置最小高度為當(dāng)前視口，使不管中間部分有多高，始終都可以保持在底部
• 設(shè)置中間部分容器高度為自適應(yīng)

實(shí)現(xiàn)CSS代碼如下：

.main { /* 開啟flex布局 */ display: flex; /* 將子元素布局方向修改為垂直排列 */ flex-flow: column; /* 設(shè)置最小高度為當(dāng)前視口，使不管中間部分有多高，始終都可以保持在底部 */ min-height: 100vh;
} .container { /* 設(shè)置 中間 部分自適應(yīng) */ flex: 1;
}

4. Grid方案

實(shí)現(xiàn)步驟如下

• 開啟 grid 布局
• 置最小高度為當(dāng)前視口，使不管中間部分有多高，始終都可以保持在底部

實(shí)現(xiàn)CSS代碼如下：

.main { /* 開啟grid布局 */ display: grid; grid-template-rows: auto 1fr auto; /* 設(shè)置最小高度為當(dāng)前視口，使不管中間部分有多高，始終都可以保持在底部 */ min-height: 100vh;
}

全屏布局

全部布局主要應(yīng)用在后臺(tái)，主要效果如下所示：

這里介紹三種全屏布局的實(shí)現(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">headerdiv>
    <div class="content">
        <div class="left">導(dǎo)航div>
        <div class="right">
            <div class="right-in">自適應(yīng)，超出高度出現(xiàn)滾動(dòng)條div>
        div>
    div>
    <div class="footer">footerdiv>
div>

1. 使用calc函數(shù)實(shí)現(xiàn)

實(shí)現(xiàn)步驟如下：

• 通過 calc 函數(shù)計(jì)算出中間容器的高度。
• 中間出現(xiàn)滾動(dòng)條的容器設(shè)置overflow: auto即出現(xiàn)滾動(dòng)條的時(shí)候出現(xiàn)滾動(dòng)條。

實(shí)現(xiàn)CSS代碼如下：

.content { overflow: hidden; /* 通過 calc 計(jì)算容器的高度 */ height: calc(100vh - 200px);
} .left { height: 100%;
} .right { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto; height: 100%;
} .right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;
}

2. Flex 方案

使用 Flex 方式實(shí)現(xiàn)該布局比較簡單。

實(shí)現(xiàn)CSS代碼如下

.container { /* 開啟flex布局 */ display: flex; /* 將子元素布局方向修改為垂直排列 */ flex-flow: column;
} .content { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto; /* 設(shè)置 中間 部分自適應(yīng) */ flex: 1;
} .right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;
}

3. Grid 方案

grid布局對(duì)于這種布局來說，實(shí)現(xiàn)起來是非常得心應(yīng)手的，通過template屬性即可實(shí)現(xiàn)。

實(shí)現(xiàn)CSS代碼如下

.container { /* 開啟grid布局 */ display: grid; grid-template-rows: auto 1fr auto;
} .content { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto;
} .right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;
}

原文地址:https://mp.weixin.qq.com/s/6pNcDBDqZzOJP46V6eZJeg