前端： 42 种前端常用布局方案，值得收藏！
對 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)也是固定的，就是一個父級，其寬度繼承了?<body>?的寬度，還有一個子級，這里是固定的300px*300px，代碼如下：
<div?class="parent"><div?class="child"></div> </div>最終的實(shí)現(xiàn)效果如下：
上圖中玫瑰色的塊是父級，隨頁面寬度增加的；淡紫色是子級，相對于父級居中的。
1. 使用text-align屬性
若元素為行內(nèi)塊級元素，也就是 display: inline-block 的元素，可以通過為其父元素設(shè)置t ext-align: center 實(shí)現(xiàn)水平居中。實(shí)現(xiàn)的CSS代碼如下：
.parent?{/*?對于子級為?display:?inline-block;?可以通過?text-align:?center;?實(shí)現(xiàn)水平居中?*/text-align:?center; }.child?{display:?inline-block; }2. 定寬塊級元素水平居中(方法一)
對于定寬的的塊級元素實(shí)現(xiàn)水平居中，最簡單的一種方式就是?margin: 0 auto;，但是值得注意的是一定需要設(shè)置寬度。實(shí)現(xiàn)?CSS?代碼如下：
.child?{/*?對于定寬的子元素，直接?margin:0?auto;?即可實(shí)現(xiàn)水平居中?*/margin:?0?auto; }3. 定寬塊級元素水平居中(方法二)
對于開啟定位的元素，可以通過?left?屬性 和?margin?實(shí)現(xiàn)。實(shí)現(xiàn)CSS代碼如下：
.child?{/*?開啟定位?*/position:?relative;left:?50%;/*?margin-left?為?負(fù)的寬度的一半?*/margin-left:?-150px; }4. 定寬塊級元素水平居中(方法三)
當(dāng)元素開啟決定定位或者固定定位時，?left?屬性和?right?屬性一起設(shè)置就會拉伸元素的寬度，在配合?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. 定寬塊級元素水平居中(方法四)
當(dāng)元素開啟決定定位或者固定定位時，?left?屬性和?transform?屬性即可實(shí)現(xiàn)水平居中。
實(shí)現(xiàn)CSS代碼如下：
.parent?{position:?relative; }.child?{/*?開啟定位?*/position:?absolute;/*?該方法類似于 left 于?-margin 的用法，但是該方法不需要手動計(jì)算寬度。?*/left:?50%;transform:?translateX(-50%); }6. Flex方案
通過?Flex?可以有很多方式實(shí)現(xiàn)這個居中布局的效果。
實(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)也是固定的，就是一個父級包裹一個子級，這里的子級是固定的300px*300px，代碼如下：
<div?class="parent"><div?class="child"></div> </div>最終的實(shí)現(xiàn)效果如下：
1. 行內(nèi)塊級元素垂直居中
若元素是行內(nèi)塊級元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并讓父元素行高等同于高度。
實(shí)現(xiàn)CSS代碼如下：
.parent?{/*?為父級容器設(shè)置行高?*/line-height:?500px; }.child?{/*?將子級元素設(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?{/*?為父級容器開啟相對定位?*/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?{/*?為父級容器開啟相對定位?*/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?{/*?為父級容器開啟相對定位?*/position:?relative; }.child?{position:?absolute;top:?50%;transform:?translateY(-50%); }5. Flex方案
通過 Flex 可以有很多方式實(shí)現(xiàn)這個垂直居中布局的效果。
實(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)也是固定的，就是一個父級包裹一個子級，這里的子級是固定的300px*300px，代碼如下：
<div?class="parent"><div?class="child"></div> </div>最終的實(shí)現(xiàn)效果如下：
1. 行內(nèi)塊級水平垂直居中方案
步驟如下：
容器元素行高等于容器高度
通過 text-align: center; 實(shí)現(xiàn)水平居中
將子級元素設(shè)置為水平塊級元素
通過 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?{/*?將子級元素設(shè)置為水平塊級元素?*/display:?inline-block;/*?通過?vertical-align:?middle;?實(shí)現(xiàn)垂直居中?*/vertical-align:?middle; }2. 定位實(shí)現(xiàn)水平垂直居中方案(一)
步驟如下：
使子元素相對于容器元素定位
子元素開啟絕對定位
設(shè)置該元素的偏移量，值為50% 減去寬度/高度的一半
實(shí)現(xiàn)CSS代碼如下：
.parent?{/*?1.?使子元素相對于本元素定位?*/position:?relative; } .child?{/*?2.?開啟絕對定位?*/position:?absolute;/*?3.?設(shè)置該元素的偏移量，值為?50%減去寬度/高度的一半?*/left:?calc(50%?-?150px);top:?calc(50%?-?150px); }3. 定位實(shí)現(xiàn)水平垂直居中方案(二)
步驟如下：
使子元素相對于容器元素定位
子元素開啟絕對定位
設(shè)置該元素的偏移量，值為50%
通過外邊距-值的方式將元素移動回去
實(shí)現(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. 定位實(shí)現(xiàn)水平垂直居中方案(三)
步驟如下：
使子元素相對于容器元素定位
子元素開啟絕對定位
將子元素拉滿整個容器
通過margin:auto實(shí)現(xiàn)水平垂直居中
實(shí)現(xiàn)CSS代碼如下：
.parent?{/*?1.?使子元素相對于本元素定位?*/position:?relative; } .child?{/*?2.?開啟絕對定位?*/position:?absolute;/*?3.?將子元素拉滿整個容器?*/top:?0;left:?0;right:?0;bottom:?0;/*?4.?通過?margin:auto?實(shí)現(xiàn)水平垂直居中?*/margin:?auto; }5. 定位實(shí)現(xiàn)水平垂直居中方案(四)
步驟如下：
使子元素相對于容器元素定位
子元素開啟絕對定位
設(shè)置該元素的偏移量，值為50%
通過?translate?反向偏移的方式，實(shí)現(xiàn)居中
實(shí)現(xiàn) CSS 代碼如下：
.parent?{/*?1.?使子元素相對于本元素定位?*/position:?relative; } .child?{/*?2.?開啟絕對定位?*/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)方式相對來說比較簡單，方式也較多。
實(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; } /*?清除浮動?*/ .clearfix:after?{content:?'';display:?block;height:?0;clear:?both;visibility:?hidden; }1. float+calc()函數(shù)完成左列定寬右列自適應(yīng)
步驟如下：
左邊列開啟浮動
右邊列開啟浮動
右邊列寬度為父級 100%減去左列的寬度
實(shí)現(xiàn)CSS代碼如下：
.left?{/*?左邊列開啟浮動?*/float:?left; } .right?{/*?右邊列開啟浮動?*/float:?left;/*?寬度減去左列的寬度?*/width:?calc(100%?-?200px); }2. float+margin-left完成左列定寬右列自適應(yīng)
步驟如下：
左邊列開啟浮動
通過外邊距的方式使該容器的左邊有左邊列容器的寬度的外邊距
實(shí)現(xiàn)CSS代碼如下：
.left?{/*?左邊列開啟浮動?*/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)，下面這幾種方案左邊列可以由子級撐起。
4. float+overflow完成左列定寬右列自適應(yīng)
步驟如下：
左側(cè)元素開始浮動
右側(cè)自適應(yīng)元素設(shè)置overflow會創(chuàng)建一個BFC完成自適應(yīng)
實(shí)現(xiàn)CSS代碼如下：
.left?{/*?1.?左側(cè)元素開始浮動?*/float:?left; } .right?{/*?2.?右側(cè)自適應(yīng)元素設(shè)置?overflow?會創(chuàng)建一個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; } /*?清除浮動?*/ .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)整后如下：
左列容器開啟左浮動
右列容器開啟右浮動
自適應(yīng)元素設(shè)置overflow會創(chuàng)建一個BFC完成自適應(yīng)
實(shí)現(xiàn)CSS代碼如下
.left?{/*?1.?左列容器開啟左浮動?*/float:?left; } .content?{/*?自適應(yīng)元素設(shè)置?overflow?會創(chuàng)建一個BFC?完成自適應(yīng)?*/overflow:?hidden; } .right?{/*?2.?右列容器開啟右浮動?*/float:?right; }2. 通過float實(shí)現(xiàn)(二)
實(shí)現(xiàn)步驟：
為了完成效果需要調(diào)整 HTML 結(jié)構(gòu)，調(diào)整后如下：
左列容器開啟左浮動
右列容器開啟右浮動
使中間自適應(yīng)的寬度為父級容器減去兩個定寬的列
實(shí)現(xiàn)CSS代碼如下：
.left?{/*?1.?左列容器開啟左浮動?*/float:?left; } .content?{/*?3.?使中間自適應(yīng)的寬度為父級容器減去兩個定寬的列?*/width:?calc(100%-400px); } .right?{/*?2.?右列容器開啟右浮動?*/float:?right; }3. 通過position實(shí)現(xiàn)
實(shí)現(xiàn)步驟
左右兩列脫離文檔流，并通過偏移的方式到達(dá)自己的區(qū)域
使中間自適應(yīng)的寬度為父級容器減去兩個定寬的列
通過外邊距將容器往內(nèi)縮小
實(shí)現(xiàn)CSS代碼如下：
.left?{/*?1.?左右兩列脫離文檔流，并通過偏移的方式到達(dá)自己的區(qū)域?*/position:?absolute;left:?0;top:?0; } .content?{/*?2.?使中間自適應(yīng)的寬度為父級容器減去兩個定寬的列?*/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; }等分布局
等分布局就是將一個容器平均分成幾等份，這里以 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%的寬度。
實(shí)現(xiàn)CSS代碼如下：
.item?{/*?開啟浮動，每個元素占?25%?的寬度?*/width:?25%;float:?left; }2. 行內(nèi)塊級+百分比方式
這種方式與上面那種方式類似，不過需要注意的是行內(nèi)塊級元素有一些類似于邊距的幾個像素，導(dǎo)致各25%會超出容器。
實(shí)現(xiàn)CSS代碼如下：
.item?{/*?設(shè)置每個元素為行內(nèi)塊級元素，每個元素占?24.5%?的寬度?*/width:?24.5%;/*?因?yàn)樾袃?nèi)塊級元素有一些類似于邊距的幾個像素，導(dǎo)致各占25會超出容器?*/display:?inline-block; }3. Flex方案
通過 Flex 布局實(shí)現(xiàn)該功能主要是通過?flex?屬性來實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下：
.container?{/*?開啟?flex?布局?*/display:?flex; } .item?{/*?每個元素占相同的寬度?*/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)容不夠長時，底部欄就會固定到瀏覽器的底部；如果足夠長時，底部欄就后跟隨在內(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">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. 絕對定位的方式
通過絕對定位的方式實(shí)現(xiàn)Sticky Footer布局的步驟如下：
設(shè)置最外層容器高度為100%；
讓子元素元素相對于容器元素進(jìn)行定位，并設(shè)置容器元素最小高度為100%；
在中間區(qū)域設(shè)置padding-bottom為footer的高度 ；
底部欄絕對定位，并一直吸附在底部即可實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下：
/*?1.?設(shè)置最外層容器為100%?*/ html, body?{height:?100%; } /*?2.?讓子元素元素相對于容器元素進(jìn)行定位，并設(shè)置容器元素最小高度為100%?*/ .main?{position:?relative;min-height:?100%; } /*?3.?在中間區(qū)域設(shè)置?padding-bottom?為footer?的高度?*/ .container?{padding-bottom:?100px; } /*?由于開啟了絕對定位，寬度成了自適應(yīng)，設(shè)置為100%?bottom:0?始終保持底部?*/ .footer?{position:?absolute;width:?100%;bottom:?0; }2. 使用calc函數(shù)實(shí)現(xiàn)
使用?calc?函數(shù)實(shí)現(xiàn)的方式會比較簡單，中間的容器最少高度為視口寬度的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)用在后臺，主要效果如下所示：
這里介紹三種全屏布局的實(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">header</div><div?class="content"><div?class="left">導(dǎo)航</div><div?class="right"><div?class="right-in">自適應(yīng)，超出高度出現(xiàn)滾動條</div></div></div><div?class="footer">footer</div> </div>1. 使用calc函數(shù)實(shí)現(xiàn)
實(shí)現(xiàn)步驟如下：
通過?calc?函數(shù)計(jì)算出中間容器的高度。
中間出現(xiàn)滾動條的容器設(shè)置overflow: auto即出現(xiàn)滾動條的時候出現(xiàn)滾動條。
實(shí)現(xiàn)CSS代碼如下：
.content?{overflow:?hidden;/*?通過?calc?計(jì)算容器的高度?*/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?方式實(shí)現(xiàn)該布局比較簡單。
實(shí)現(xiàn)CSS代碼如下
.container?{/*?開啟flex布局?*/display:?flex;/*?將子元素布局方向修改為垂直排列?*/flex-flow:?column; } .content?{/*?如果超出出現(xiàn)滾動條?*/overflow:?auto;/*?設(shè)置?中間?部分自適應(yīng)?*/flex:?1; } .right-in?{/*?假設(shè)容器內(nèi)有500px的元素?*/height:?500px; }3. Grid 方案
grid布局對于這種布局來說，實(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)滾動條?*/overflow:?auto; } .right-in?{/*?假設(shè)容器內(nèi)有500px的元素?*/height:?500px; }作者：一碗周?
https://juejin.cn/post/7028962991345254407
IT技術(shù)分享社區(qū)
個人博客網(wǎng)站：https://programmerblog.xyz
文章推薦程序員效率：畫流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠(yuǎn)程辦公：常用的遠(yuǎn)程協(xié)助軟件，你都知道嗎？51單片機(jī)程序下載、ISP及串口基礎(chǔ)知識硬件：斷路器、接觸器、繼電器基礎(chǔ)知識
總結(jié)
以上是生活随笔為你收集整理的前端： 42 种前端常用布局方案，值得收藏！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Python】基于Python的百度迁
- 下一篇： css background 充满自适应