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

gyl_coder 發布于2019-08-30 13:09 / 1713人閱讀

摘要：優點實現簡單，父容器不用設置具體高度值缺點依然存在需要清除浮動的舉動，因為父容器沒有設置方案三使用來實現優點將父容器的設置為，將子元素設置為，讓左右結構表現為一樣，那么就具有的一些特性列高度自適應上下居中等等。

相信大家一看到這個題目，有些同學就會叫到：“我也遇到過這樣的問題！”，這具體是什么問題呢？

有這樣一種頁面結構：


    
        left
    
    
        right

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

這就尷尬了~咋辦呢？有的同學就給出了以下的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規范

GPU云服務器云服務器高度自適應 textarea自適應高度 iframe高度自適應 iframe自適應高度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115337.html

CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
CSS布局說——可能是最全的

摘要：元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。這些相對于布局來說是基礎的，同時也是非常重要的。可以看到，浮動元素，其實對于布局來說，是特別危險的。前言現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔。或許是職責越來越大，整體的前端井噴式的發展，使我們只關注了js，而疏遠了css和html。其實，我們可能經常在聊組件化，咋地咋地。但是，回過頭來思...

hearaway 2019-08-30 15:53 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區別在哪一雙飛翼布局可以看到，我們在里面又加了一個內容層。稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都...

Clect 2019-08-02 16:17 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區別在哪一雙飛翼布局可以看到，我們在里面又加了一個內容層。稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都...

468122151 2019-08-30 10:49 評論0 收藏0