前端筆記：左右結構中，如何作到左右高度自適應？

相信你們一看到這個題目，有些同窗就會叫到：「我也遇到過這樣的問題！」，這具體是什麼問題呢？

有這樣一種頁面結構：

<div class="container">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

這樣的頁面結構相信你們常常會遇到，可是這樣的結構會出現什麼問題呢？常常會遇到，當左邊的內容沒有右邊那麼多或者反過來時，就困惑了，左邊高度不會跟右邊保持一致啊！具體表現以下圖：

這就尷尬了~咋辦呢？有的同窗就給出瞭如下的css，期待可以解決這個問題：

.container {
    overflow: hidden;
}
.container .left, .container .right {
    float: left;
}
.container .left {
    width: 20%;
    height: 100%; /* 惋惜不行哦。 */
}
.container .right {
    width: 80%;
}

結果就是，too 樣 too simple~

能夠看到，這個辦法是行不通的，爲何呢？爲何設置了height爲100%卻不像預期的那樣呈現呢？其實這裏面沒有正確理解height這個值的設置，具體能夠看看MDN的height解釋。

幾種解決方案：

方案一

給最外的元素設置具體的高度值：

.container {
    overflow: hidden;
    height: 100px;
}
.container .left, .container .right {
    float: left;
}
.container .left {
    width: 20%;
    height: 100%; 
}
.container .right {
    width: 80%;
    height: 100%;
}

這樣就能夠了，由於子元素的高度使用百分比時，是使用父元素的高度來進行計算的，若是父元素沒給出具體的高度，那麼會使用auto，而auto由瀏覽器來計算高度，瀏覽器計算出來的高度只會是元素的內容高度，因此爲何外部元素不設置高度時，內部元素不會自適應高度.

優勢

• 完美解決左右子元素高度不一致問題

缺點

• 必須設置外部容器的具體高度，當外部容器的高度不定時，問題就頭疼了

• 子元素設置浮動，若是不設置overflow:hidden，則必須清除浮動，帶來沒必要要的麻煩

方案二

不設置外部元素的具高度，而設置root元素的高度爲100%；

html,body {
    height: 100%;
}
.container {
    height: 100%/inherit;
    clear: both;
}
.container:after {
    display: block;
    content: " ";
    clear: both;
}
.container .left, .container .right {
    float: left;
}
.container .left {
    width: 20%;
    height: 100%/inherit; 
}
.container .right {
    width: 80%;
    height: 100%/inherit;
}

根據規範和方案一的經驗，咱們能夠知道，當父容器設置了100%時，計算的高度會去找父容器，若是父容器無設置具體值，則會一直向上找，一直找到root元素，那麼咱們設置root元素爲100%，root元素的高度是100%了，當前容器就計算出來是100%了。固然當前元素使用inherit也是能夠的，繼承於父元素的計算方式。

優勢

• 實現簡單，父容器不用設置具體高度值

缺點

• 依然存在須要清除浮動的舉動，由於父容器沒有設置overflow:hidden;

方案三

使用display來實現：

.container {
    display: table;
    width: 100%;
}
.container .left, .container .right {
    display: table-cell;
}
.container .left {
    width: 20%;
}
.container .right {
    width: 80%;
}

優勢

將父容器的display設置爲table，將子元素display設置爲table-cell，讓左右結構表現爲table同樣，那麼就具備table的一些特性：列高度自適應、上下居中等等。

缺點

暫未發現

方案四

使用相對定位和絕對定位來實現

.container {
    position: relative;
}

.container .left {
    position: absolute;
    width: 20%;
    height: 100%;
}
.container .right {
    margin-left: 20%;
    width: 80%;
    height: 100%;
}

優勢

• 代碼量少，實現簡單，兼容性高

缺點

• position：relative帶來的一些問題（不詳細述說，請讀者自行挖坑）

方案五

使用flex和設置height實現

html,body{
    height: 100%;
}
.container {
    display: flex;
    height: 100%;
}

.container .left {
    width: 20%;
}
.container .right {
    width: 80%;
}

優勢

• 實現起來很是簡單，簡單幾行代碼便可

缺點

• 兼容性問題，IE10+才能實現，並且在移動端也有必定得兼容性問題

參考資料

• MDN

• w3規範