等高分欄佈局小結

時間  2019-11-20
標籤 等高 分欄 佈局 小結 简体版
原文   原文鏈接

上一篇文章《聖盃佈局小結》總結了幾種常見的分欄佈局方法，這幾個方法均可以實現多欄頁面下，全部欄的高度可動態變化，某一欄寬度自適應的佈局效果，能知足工做中不少佈局需求。後來我在蒐集更多關於分欄佈局的文章時，發現了一個新的問題，這個問題在前面那篇文章中也有朋友在評論裏跟我提起，就是如何在實現分欄佈局的同時保證每欄的高度相同。我發現這種等高分欄佈局的狀況，在網站裏面其實也很常見，因此本文總結了幾種可用的方法來解決這個新的需求。css

1. 方法一：萬能的flex

跟上篇文章不一樣，此次把flex這種方法放在了第一位，由於相比較起來，它是全部分欄佈局方法裏面，優勢最多的，若是兼容性容許的話，頗有必要在任什麼時候候都優先使用它完成頁面佈局。若是你打開上篇文章，找到倒數第二部分關於flex實現分欄佈局的代碼，或者把上篇文章提供的代碼下載下來，直接預覽flex_layout.html，你會發現上篇文章的那段代碼其實已經作到了等高分欄佈局，同一段代碼，能夠實現上篇文章中提到的五種分欄佈局，還能夠實現本文提到的等高佈局的狀況，這種能力其它方法真的沒法比擬。而它之因此能實現等高佈局，跟一個flex的css屬性有關係，這個屬性是：align-item。它的默認值是：stretch，在flex item元素好比layout__main或layout__aside的高度未定義或者爲auto的狀況下，會拉伸flex item元素的高度或寬度，鋪滿flex的交叉軸，詳細的原理能夠經過上文提供的flex學習資源去了解，這裏只作一個簡單的引用說明。html

2. 方法二：使用table或者僞table

上篇文章中還有另外兩種佈局方法沒有介紹，第一種就是這裏要說的table佈局或者僞table佈局。table佈局用的就是table tr td這些元素去實現，相信絕大部分web開發人員在入門html時，首先接觸到的佈局方法確定就是table佈局了，這種方法簡單高效，用它作任何分欄佈局都不是問題，只是由於table的嵌套結構太多，html冗雜，又不利於DOM的操做和渲染，用來佈局不符合語義，總之缺點較多，因此目前的環境下，用的狀況愈來愈少了。僞table佈局其實跟table佈局相似，只不過藉助於css，可讓咱們不直接使用table tr td這些直接的表格元素，而是經過display: table, display: table-row, display: table-cell，改變元素的顯示特性，讓瀏覽器把這些元素當成table來渲染，這種渲染的表現跟用真實的table沒有啥區別，就連那些table專用的css屬性，好比table-layout，border-collapse和border-spacing，都能產生效果。table佈局的方法已經不多被採用了，本文也就不必再去介紹，可是僞table佈局的方法值得學習一下，通過這兩天的學習，發現僞table的方式相比直接用表格佈局，有很多的優勢，值得運用到工做中去。不過在說明使用僞table佈局的方法以前，得先了解一些僞table相關的知識：web

1）可用於僞table表現的display屬性值有：瀏覽器

image

2）當把一個元素的display屬性設置成以上列出的值後，就能夠把這個元素當作與該屬性對應的表格元素，好比table-cell對應的就是td；同時，這個元素會擁有跟表格元素同樣的特性，好比display: table或者inline-table的元素可使用table-layout，border-collapse和border-spacing這三個本來只有table才能生效的屬性；display:table-cell的元素跟td同樣，對寬度高度敏感，對margin值無反應，對padding有效。app

3）關於table-cell還有一點要說明的就是，它會被其餘一些CSS屬性破壞，例如float, position:absolute，因此這些個屬性不能同時使用。ide

4）跟直接使用表格元素不一樣的是，在使用表格元素的時候須要徹底遵照表格元素嵌套結構，也就是下面這種：工具

<table>
    <thead>
        <th></th>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <th></th>
    </tfoot>
</table>

而使用僞table的那些屬性時，能夠僅單獨使用某一個屬性，瀏覽器會在這些元素的外層包裹缺失的框來保證僞table元素框嵌套結構的完整性，這些框跟常提到的行框同樣都是不可見的，網上有的文章裏也把這種作法叫作匿名錶格。下面的這個代碼中，tb-cell元素的外層沒有加display: table-row和display: table的元素：佈局

.tb-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
}


<div class="tb-cell">這是第1個display: table-cell;的元素。</div>
<div class="tb-cell">這是第2個display: table-cell;的元素。</div>

可是看到的效果是（藍色背景是它們父層的一個包裹元素: width: 800px;margin-left: auto;margin-right: auto）：學習

image

由於瀏覽器自動在這兩個元素的外層，加了跟可以跟tr和table起相同做用的框，來包含這兩個元素造成的框，因此這兩個元素看起來就跟實際的表格效果同樣。假如瀏覽器沒有作這個處理，這兩個元素之間是不可能沒有間隙的，中間會有一個由於換行符顯示出來的空格。這種自動添加的框都是行內框，不是塊級框。flex

接下來看看如何經過這些僞table的屬性來完成上文的分欄佈局以及本文要求的等高分欄佈局，玩法有不少：（本文相關源碼下載）

玩法一：模擬直接用表格佈局（對應源碼中table_layout1.html）

這種方法的思路是佈局時徹底按照表格的嵌套層次來處理，把display: table, display: table-row, display: table-cell都用上，至關於就是利用完整的table來作，好比說要實現上文的佈局三（3欄佈局，2個側邊欄分別固定在左邊和右邊，中間是主體內容欄），就能夠這麼幹：

<div class="layout">
    <div class="layout__row">
        <aside class="layout__col layout__aside layout__aside--left">左側邊欄寬度固定</aside>
        <div class="layout__col layout__main">內容欄寬度自適應<br>高度增長一點，旁邊的高度都會自動增長</div>
        <aside class="layout__col layout__aside layout__aside--right">右側邊欄寬度固定</aside>
    </div>
</div>
<style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__row {
        display: table-row;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
</style>

效果仍是那個效果，並且天生支持等高佈局：

image

這個佈局原理跟使用table是徹底同樣的，因此使用起來很是容易（以上提供的是針對上文佈局三的實現，其它四個佈局的實現不會再一一介紹了，源碼裏面也不會提供，由於相對比較簡單）。

這種僞table佈局有什麼特色呢：

1）相比直接用表格元素，這種作法不須要考慮語義，表格元素是有語義的，主要是用來顯示網頁上列表型的數據內容，雖然能夠完成佈局，可是佈局結構都是沒有語義的，因此直接用表格不合適，而這種僞table佈局的特色就是：它沒有語義，可是能夠像表格那樣佈局；

2）html的層次結構相比直接用table元素也要簡單一些，咱們這裏只用到了3層，直接用table元素的話可能還有tbody這一層；

3）相比上文提到的那些佈局方法，如聖盃佈局和雙飛翼佈局，這個作法在css方面相對簡單，在html方面也只多了一層嵌套；

4）缺點是分欄之間的間隔不能用margin和padding來作，若是用margin，這個屬性在display: table-cell的元素上根本不會生效；若是用padding，那像demo裏面各欄的背景色就都會連到一塊，作不出間隔的效果，若是在layout__col裏面再嵌套一層，在這一層設置背景色的話，又會增長html的層次，也不是很好。我這裏是投了個巧，用border處理了一下。

玩法二：去掉display: table-row（對應源碼中的table_layout2.html）

前面說過，瀏覽器會用匿名錶格的方式，添加缺失的框，因此玩法一中的代碼，把layout-row徹底去掉，一點都不影響佈局效果：

<div class="layout">
    <aside class="layout__col layout__aside layout__aside--left">左側邊欄寬度固定</aside>
    <div class="layout__col layout__main">內容欄寬度自適應<br>高度增長一點，旁邊的高度都會自動增長</div>
    <aside class="layout__col layout__aside layout__aside--right">右側邊欄寬度固定</aside>
</div>
<style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
</style>

玩法三：去掉display: table（對應源碼中的table_layout3.html）

根據玩法二，能夠試想一下是否能再把display: table這一個屬性給去掉，反正瀏覽器還會再添加框來包裹：

<div class="layout">
    <aside class="layout__col layout__aside layout__aside--left">左側邊欄寬度固定</aside>
    <div class="layout__col layout__main">內容欄寬度自適應<br>高度增長一點，旁邊的高度都會自動增長</div>
    <aside class="layout__col layout__aside layout__aside--right">右側邊欄寬度固定</aside>
</div>
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

效果是：

image

這個並無達到咱們的效果，由於我須要主體內容欄可以自適應寬度。產生這個效果的緣由是什麼，就是由於沒有加顯示display: table這一層，瀏覽器自動加了一個框，不過這個框是行內框，致使主體內容欄顯示的寬度就跟內容的寬度一致了。爲了解決這個問題，能夠這麼幹，html結構不變，css稍加改動：

.layout__main {
    width: 3000px;
    background-color: #4DBCB0;
}

.layout__aside {
    width: 200px;
    min-width: 200px;
    background-color: #daf1ef;
}

關鍵的代碼就是紅色新增的那兩行，首先給主體內容欄設置一個很長的寬度，並且只能用具體的長度設置，不能用百分比，而後給側邊欄設置一個最小寬度，省得主體內容欄把側邊欄的寬度給擠掉了。這個原理就是由於display: table-cell的做用，致使layout__main跟layout__aside表現出跟td元素同樣的特性，td默認的寬度就是可自動調整的，即便寬度設置的很大，也不會撐破table的寬度，這裏雖然那個自動添加的框看不到，可是這個框的最大寬度也就是瀏覽器的寬度，layout__main不會打破這個寬度的，因此能夠放心使用。

玩法四：去掉layout這一層包裹元素（對應源碼：table_layout4.html）

若是網站比較簡單，去掉layout這一層包裹元素也是能夠的：

<header>頂部</header>
<aside class="layout__col layout__aside layout__aside--left">左側邊欄寬度固定</aside>
<div class="layout__col layout__main">內容欄寬度自適應<br>高度增長一點，旁邊的高度都會自動增長</div>
<aside class="layout__col layout__aside layout__aside--right">右側邊欄寬度固定</aside>
<footer>底部</footer>
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
        line-height: 50px;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        width: 3000px;
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

以上四種作法都能實現咱們想要的分欄等高佈局，兼容性方面，不考慮IE8及如下，其它瀏覽器幾乎沒有問題。

因爲匿名錶格的做用，致使採用僞table佈局的方法變得很是簡潔，上文之因此沒提到這個作法，是由於徹底不知道有匿名錶格這回事，我也是寫這篇文章才學習到的，學完以後，發現又找到了一個作分欄佈局的好辦法，但願前面的這些介紹能幫助你掌握好這個用法。實際上僞table的這些屬性，尤爲是table-cell，用途很是多，本文沒有辦法一一介紹，可是能提供一個思路，未來工做中也許有不少其它佈局場景，咱們均可以想一想用table-cell來處理。

3. 方法三：使用絕對定位

上文沒有介紹的另一種分欄佈局方法就是這裏要介紹的絕對定位。之因此沒介紹這個方法，是由於上文介紹的都是分欄自適應佈局的方法，而絕對定位的作法，不能徹底作到咱們想要的分欄自適應佈局，分欄自適應有兩個原則：第一是主體內容欄寬度自適應，這點絕對定位是能夠作到的；第二點是全部欄的高度都能動態變化，而且不能致使父容器高度塌陷，不能在各欄內部出現滾動或溢出的狀況，這點絕對定位不容易作到適用全部場景。而本文又把這種佈局方法拿出來介紹，是由於絕對定位作等高佈局很容易，因此用絕對定位作等高分欄佈局是一種可行的辦法，只是這種方法適用的場景有一些限制，須要根據實際狀況考慮是否要採用。

作法一：全部欄都採用絕對定位（對應源碼中absolute_layout1.html）

<header>頂部</header>
<div class="layout">
    <aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside>
    <div class="layout__main">內容欄寬度自適應</div>
    <aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
</div>
<footer>底部</footer>
<style type="text/css">
    .layout {
        height: 300px;
        position: relative;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果：

image

這種佈局方法的特色是：

1）主體內容欄是自適應的；

2）全部欄徹底等高，效果跟flex佈局和僞table佈局的效果同樣；

從這兩點來看，這種絕對定位的方法仍是比較好用的，不過它有一個很是大的使用限制，就是父元素的高度沒有辦法經過它的內部元素給撐起來，要用的話，必須想辦法讓父元素有高度，適合作父元素高度可知或者全屏佈局。好比如下這個代碼就是全屏佈局的一個例子（對應源碼中absolute_layout2.html）：

<header>頂部</header>
<div class="layout">
    <aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside>
    <div class="layout__main">內容欄寬度自適應</div>
    <aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
</div>
<footer>底部</footer>
<style type="text/css">
    html,body {
        margin: 0;
        height: 100%;
    }
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .layout {
        width: 100%;
        position: absolute;
        top: 50px;
        bottom: 50px;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果：

image

作法二：側邊欄絕對定位，主體內容欄保持流式佈局（對應源碼中absolute_layout3.html）

<div class="layout">
    <aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside>
    <div class="layout__main">內容欄寬度自適應<br>高度增長一點，旁邊的高度都會自動增長</div>
    <aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
</div>
<style type="text/css">
    .layout {
        position: relative;
    }
    .layout__aside {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果：

image

這個方法的特色是：

1）主體內容欄是寬度自適應的；

2）全部欄也是徹底等高的；

上面的代碼中，layout__main經過magin來給側邊欄留出空間，其實也能夠在layout元素上添加padding來處理，做用是同樣的。這個方法相比前一個方法好一點的是，父元素的高度能夠經過主體內容欄給撐起來，不過由此也帶來了一個新問題，就是內容欄高度不夠的時候，側邊欄就會出現溢出或者滾動，解決這個新問題的辦法有2個：第一，若是側邊欄的內容都是已知的，而且沒有摺疊展開這種會改變側邊欄內容高度的功能，那麼能夠給layout設置一個min-height來處理；第二，若是側邊欄的內容是動態的，除了給layout加min-height以外，還得在每次改變側邊欄內容的時候，主動去調整主體內容欄的高度，若是主體內容欄的高度小於側邊欄的高度，就要更新主體內容欄的高度。不過若是你的內容欄的內容不少，側邊欄內容較少的話，就不用考慮這個新問題了。

絕對定位的作法就是這樣，第一種限制較高；第二種稍微強一些，在一些場景下，可能還得藉助JS來處理，因此綜合起來不算是一個很是好的方式。只有你的佈局需求剛好知足它的條件時，可能纔會考慮使用它，就像上文中我提出的項目一的需求，就必定要用絕對定位的佈局來作。

4. 方法四：藉助邊框，背景實現假等高

前面介紹了幾種分欄等高佈局，有table佈局，僞table佈局，絕對定位佈局，flex佈局，這四種佈局方法在實現等高佈局時，屬於徹底等高的狀況，就是說他們佈局出來的頁面，各欄的真實高度都是相同的，而且在任意欄的內容動態變化時，其它欄的高度都能相應地自動調整，若是佈局的時候用的是這幾個佈局方法，那麼等高的問題就不存在了。不過回看一下上文內容的話，上文提到的3種佈局方式：聖盃佈局，雙飛翼佈局，float佈局，不用JS的話，就沒法作到這種徹底等高的效果。這三種佈局，只能考慮藉助邊框和背景實現視覺上的等高，也就是假等高的作法。畢竟從效果上來講，若是沒有設置背景和邊框的話，即便是徹底等高，視覺上也看不出來，因此假等高的作法是值得采用的。

作法一：利用背景圖片

以佈局容器寬度固定的左中右三欄佈局說明這個作法的步驟，首先製做一張高度較小，寬度跟佈局容器寬度相同的背景圖片，把這張圖片做爲佈局容器的背景圖垂直平鋪。這張背景圖要求跟頁面同樣也是分欄，並且每欄的寬度和欄之間的間隔都跟頁面佈局裏面的欄位寬度和欄位間隔相同，這樣才能保證，背景圖片的每一個欄位與頁面裏面的每一個欄位重合。由於頁面裏面的每一個欄位底下，都有一個背景圖片的欄位跟它對應，因此即便某一欄高度不夠，可是視覺上這個欄位的高度跟佈局容器的高度是相同的，這就是藉助背景圖來達到視覺等高的原理。這個作法的經典例子就是http://www.w3school.com.cn/，它的佈局效果是這樣的：

image

看起來這是一個三欄等高佈局，分欄是經過float實現的，等高卻不是徹底等高，而是經過背景圖片實現的，它在佈局容器上用了下面這張背景圖：

wrapper

image

它的佈局html結構是（馬賽克掉的是header,導航欄,footer，跟分欄佈局沒有關係，因此注掉了）：

image

而後各欄只要都向左浮動，配置好寬度就行：

imageimageimage

前面說明這個作法的步驟包括舉的例子都針對的是佈局容器寬度固定的左中右三欄佈局，若是是自適應的分欄佈局，又該怎麼處理？下面以上文聖盃佈局的佈局三如何藉助背景圖片作到等高效果來講明（爲了減小篇幅，其它四種佈局不會一一說明，可是這五種佈局在源碼中都有demo頁面可查看，分別對應grail_bg_layout{1,5}.html）。

佈局三：3欄佈局，2個側邊欄分別固定在左邊和右邊，中間是主體內容欄：

<div class="layout--wrapper">
    <div class="layout">
        <aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside>
        <div class="layout__main">內容欄寬度自適應<br>高度增長一點，旁邊的高度看起來都跟內容欄高度同樣</div>
        <aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
    </div>
</div>
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
        height: 100%;
    }
    .layout--wrapper {
        background: url(aside_left.png) left top repeat-y #4DBCB0;
    }
    .layout {
        background: url(aside_right.png) right top repeat-y;
        padding:0 210px;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        margin-left: -210px;
    }
    .layout__aside--right {
        margin-right: -210px;
        float: right;
    }
</style>

效果：

image

實現這個等高效果的關鍵是：

1）去掉在layout__aside layout__main上設置的背景色；

2）製做2張背景圖片，寬度都是210 * 10，分別用來作兩個側邊欄的背景：

aside_left.png : aside_left

aside_right.png: aside_right

3） html結構稍微調整下，加一層wrapper

4）layout--wrapper的背景以下設置：

background: url(aside_left.png) left top repeat-y #4DBCB0;

這樣左側邊欄和內容欄就都有了背景，左側邊欄與內容欄之間的間隔效果也出來了。

5）layout的背景以下設置：

background: url(aside_right.png) right top repeat-y;

這樣右側邊欄就有了背景，右側邊欄與內容欄之間的間隔效果也出來了。

以上就是利用背景圖作假等高效果的所有內容，這個作法對於要用背景來呈現等高效果的佈局是很是好用的一個方法，雖然網上都說它的缺點是用到了圖片，佈局一改，圖片就要改，我我的認爲這並非缺點，由於這樣的需求變更，第一是沒法避免，第二是變更地次數不必定不少，第三即便變了改起來也是兩三分鐘的事，要是本身會點PS，那弄起來就更簡單了。能解決問題的簡單方法就是最好的辦法。

作法二： 利用邊框重疊

首先得說這個作法，適合要用邊框來呈現等高效果的佈局，也就是說各欄不能有背景，不然看起來邊框是等高了，可是背景沒有等高。它的原理要分紅兩部分來講，若是是2欄佈局，作法比較簡單，好比左右分欄的佈局，給側邊欄加一個右邊框，給內容欄加一個左邊框，而後給內容欄加上負的margin-left，讓2個邊框重合，這樣無論哪一個欄位內容多，邊框重疊以後的高度就跟總體的高度一致了，也就達到了咱們想要的等高效果；若是是多欄佈局，這種邊框重疊的方式不能作到全部場景下的視覺等高，好比說左中右三欄佈局，如今是按邊框重疊的辦法實現了下等高，當左邊欄的內容動態增長不少時，右邊側邊欄跟內容欄的邊框總體高度，並不會動態增長，而後就會造成錯層的效果，對於這種狀況，能夠利用絕對定位，用額外的空元素模擬欄與欄之間的邊框效果。

下面以上文聖盃佈局的佈局一和佈局三如何藉助邊框重疊和模擬作到等高效果來講明（爲了減小篇幅，其它佈局不會一一說明，可是這幾種佈局在源碼中都有demo頁面可查看，分別對應grail_border_layout{1,3}.html）。

1）佈局一：2欄佈局，側邊欄固定在左邊，右側是主體內容欄：

<div class="layout">
    <aside class="layout__aside">側邊欄寬度固定</aside>
    <div class="layout__main">內容欄寬度自適應<br>高度增長一點，旁邊的高度看起來都跟內容欄高度同樣</div>
</div>
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
    }
    .layout {
        padding-left: 201px;
    }
    .layout__main {
        width: 100%;
        margin-left: -1px;
        border-left: 1px solid #ccc;
    }
    .layout__aside {
        width: 200px;
        border-right: 1px solid #ccc;
        margin-left: -201px;
    }
</style>

要點是：

1）要從新調整layout的padding值，和layout__aside的margin值，欄與欄之間不能有間隔；

2）layout__main設置-1px的margin-left和1px的border-left；layout__aside設置1px的border-right

效果：

image

佈局三：3欄佈局，2個側邊欄分別固定在左邊和右邊，中間是主體內容欄：

<div class="layout">
    <aside class="layout__division layout__division--left"></aside>
    <aside class="layout__division layout__division--right"></aside>
    <aside class="layout__aside layout__aside--left">左側邊欄寬度固定<br>再加點東西<br>再加點東西</aside>
    <div class="layout__main">內容欄寬度自適應<br>高度增長一點</div>
    <aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
</div>
<style type="text/css">
    .layout:after {
        content: " ";
        clear: both;
        display: table;
    }
    .layout__aside, .layout__main {
        float: left;
        height: 100%;
    }
    .layout {
        padding:0 201px;
        position: relative;
    }
    .layout__main {
        width: 100%;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        margin-left: -201px;
    }
    .layout__aside--right {
        margin-right: -201px;
        float: right;
    }
    .layout__division {
        position: absolute;
        border-left: 1px solid #ccc;
        height: 100%;
    }
    .layout__division--left {
        left:200px;
    }
    .layout__division--right {
        right:200px;
    }
</style>

效果：

image

佈局三這個作法的原理比真實的邊框重疊還要簡單些，可是不如那種方法簡潔，畢竟要增長沒有用的html元素，因此不算是一個好方法。

最後綜合比較背景和邊框這兩種假等高作法，更值得推薦的是作法一，邊框這種效果，經過背景圖也是能夠作出來的，並且邊框可以實現的視覺效果有限，利用邊框的多欄等高佈局還得增長冗餘的HTML元素，缺陷比較明顯。

5. 結束語

本文介紹了4種能夠作到徹底等高的分欄自適應佈局方法，對於上文的幾種分欄佈局：聖盃佈局，雙飛翼佈局，float佈局，也提供了一個簡單高效的方法能夠作到視覺上的假等高效果，這些方法都是可靠有效的，只要知足本身的工做需求，喜歡用哪一種就用哪一種，畢竟工做的目的是完成工做目標，而不是嘗試哪一種工具好用。但若是公司的產品不考慮那些陳舊的瀏覽器的話，我以爲全部的佈局只須要三個方法：flex，table-cell和position，其它的聖盃佈局，雙飛翼佈局，float佈局就讓它成爲經典，留在本身的博客總結中就好。PS: 雖然上文我在推薦聖盃佈局，可是我已經打算把個人項目二的佈局方式換成table-cell來搞了。

本文內容繁多，相信耽誤您很多時間，謝謝閱讀，提早祝您新年快樂：）

本文相關源碼下載

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程