成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端筆記：左右結(jié)構(gòu)中，如何做到左右高度自適應？

gyl_coder / 1719人閱讀

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

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

有這樣一種頁面結(jié)構(gòu)：


    

        left
    

    

        right

這樣的頁面結(jié)構(gòu)相信大家經(jīng)常會遇到，但是這樣的結(jié)構(gòu)會出現(xiàn)什么問題呢？經(jīng)常會遇到，當左邊的內(nèi)容沒有右邊那么多或者反過來時，就困惑了，左邊高度不會跟右邊保持一致??！具體表現(xiàn)如下圖：

這就尷尬了~咋辦呢？有的同學就給出了以下的css，期待能夠解決這個問題：

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

結(jié)果就是，too 樣 too simple~

可以看到，這個辦法是行不通的，為什么呢？為什么設置了height為100%卻不像預期的那樣呈現(xiàn)呢？其實這里面沒有正確理解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由瀏覽器來計算高度，瀏覽器計算出來的高度只會是元素的內(nèi)容高度，所以為什么外部元素不設置高度時，內(nèi)部元素不會自適應高度.

優(yōu)點

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

缺點

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

子元素設置浮動，如果不設置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;
}

根據(jù)規(guī)范和方案一的經(jīng)驗，我們可以知道，當父容器設置了100%時，計算的高度會去找父容器，如果父容器無設置具體值，則會一直向上找，一直找到root元素，那么我們設置root元素為100%，root元素的高度是100%了，當前容器就計算出來是100%了。當然當前元素使用inherit也是可以的，繼承于父元素的計算方式。

優(yōu)點

實現(xiàn)簡單，父容器不用設置具體高度值

缺點

依然存在需要清除浮動的舉動，因為父容器沒有設置overflow:hidden;

方案三

使用display來實現(xiàn)：

.container {
    display: table;
    width: 100%;
}
.container .left, .container .right {
    display: table-cell;
}
.container .left {
    width: 20%;
}
.container .right {
    width: 80%;
}
優(yōu)點

將父容器的display設置為table，將子元素display設置為table-cell，讓左右結(jié)構(gòu)表現(xiàn)為table一樣，那么就具有table的一些特性：列高度自適應、上下居中等等。

缺點

暫未發(fā)現(xiàn)

方案四

使用相對定位和絕對定位來實現(xiàn)

.container {
    position: relative;
}

.container .left {
    position: absolute;
    width: 20%;
    height: 100%;
}
.container .right {
    margin-left: 20%;
    width: 80%;
    height: 100%;
}
優(yōu)點

代碼量少，實現(xiàn)簡單，兼容性高

缺點

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

方案五

使用flex和設置height實現(xiàn)

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

.container .left {
    width: 20%;
}
.container .right {
    width: 80%;
}
優(yōu)點

實現(xiàn)起來非常簡單，簡單幾行代碼即可

缺點

兼容性問題，IE10+才能實現(xiàn)，而且在移動端也有一定得兼容性問題

參考資料

MDN

w3規(guī)范

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115337.html

相關文章

  • CSS 布局經(jīng)典問題初步整理

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

    Amos 評論0 收藏0

  • CSS布局說——可能是最全的

    摘要：元素框相對于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)。這些相對于布局來說是基礎的，同時也是非常重要的?？梢钥吹剑釉?，其實對于布局來說，是特別危險的。 前言 現(xiàn)在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔?；蛟S是職責越來越大，整體的前端井噴式的發(fā)展，使我們只關注了js，而疏遠了css和html。 其實，我們可能經(jīng)常在聊組件化，咋地咋地。但是，回過頭來思...

    hearaway 評論0 收藏0

  • 圣杯布局和雙飛翼布局

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

    Clect 評論0 收藏0

  • 圣杯布局和雙飛翼布局

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

    468122151 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<