成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

gyl_coder / 1785人閱讀

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

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

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


    

        left
    

    

        right

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

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

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

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

可以看到，這個(gè)辦法是行不通的，為什么呢？為什么設(shè)置了height為100%卻不像預(yù)期的那樣呈現(xiàn)呢？其實(shí)這里面沒有正確理解height這個(gè)值的設(shè)置，具體可以看看MDN的height解釋。

幾種解決方案： 方案一

給最外的元素設(shè)置具體的高度值：

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

這樣就可以了，因?yàn)樽釉氐母叨仁褂冒俜直葧r(shí)，是使用父元素的高度來進(jìn)行計(jì)算的，如果父元素沒給出具體的高度，那么會(huì)使用auto，而auto由瀏覽器來計(jì)算高度，瀏覽器計(jì)算出來的高度只會(huì)是元素的內(nèi)容高度，所以為什么外部元素不設(shè)置高度時(shí)，內(nèi)部元素不會(huì)自適應(yīng)高度.

優(yōu)點(diǎn)

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

缺點(diǎn)

必須設(shè)置外部容器的具體高度，當(dāng)外部容器的高度不定時(shí)，問題就頭疼了

子元素設(shè)置浮動(dòng)，如果不設(shè)置overflow:hidden，則必須清除浮動(dòng)，帶來不必要的麻煩

方案二

不設(shè)置外部元素的具高度，而設(shè)置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)驗(yàn)，我們可以知道，當(dāng)父容器設(shè)置了100%時(shí)，計(jì)算的高度會(huì)去找父容器，如果父容器無設(shè)置具體值，則會(huì)一直向上找，一直找到root元素，那么我們?cè)O(shè)置root元素為100%，root元素的高度是100%了，當(dāng)前容器就計(jì)算出來是100%了。當(dāng)然當(dāng)前元素使用inherit也是可以的，繼承于父元素的計(jì)算方式。

優(yōu)點(diǎn)

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

缺點(diǎn)

依然存在需要清除浮動(dòng)的舉動(dòng)，因?yàn)楦溉萜鳑]有設(shè)置overflow:hidden;

方案三

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

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

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

缺點(diǎn)

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

方案四

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

.container {
    position: relative;
}

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

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

缺點(diǎn)

position：relative帶來的一些問題（不詳細(xì)述說，請(qǐng)讀者自行挖坑）

方案五

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

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

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

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

缺點(diǎn)

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

參考資料

MDN

w3規(guī)范

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115337.html

相關(guān)文章

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

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

    Amos 評(píng)論0 收藏0

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

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

    hearaway 評(píng)論0 收藏0

  • 圣杯布局和雙飛翼布局

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

    Clect 評(píng)論0 收藏0

  • 圣杯布局和雙飛翼布局

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

    468122151 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<