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

2021-09-17 22:22:54 字數 1853 閱讀 4873

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

有這樣一種頁面結構：

left


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

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

.container 


.container .left, .container .right 


.container .left 


.container .right
結果就是，too 樣 too ******~

可以看到，這個辦法是行不通的，為什麼呢？為什麼設定了height為100%卻不像預期的那樣呈現呢？其實這裡面沒有正確理解height這個值的設定，具體可以看看mdn的height解釋。

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

.container 


.container .left, .container .right 


.container .left 


.container .right
這樣就可以了，因為子元素的高度使用百分比時，是使用父元素的高度來進行計算的，如果父元素沒給出具體的高度，那麼會使用auto，而auto由瀏覽器來計算高度，瀏覽器計算出來的高度只會是元素的內容高度，所以為什麼外部元素不設定高度時，內部元素不會自適應高度.

優點缺點不設定外部元素的具高度，而設定root元素的高度為100%；

html,body 


.container 


.container:after 


.container .left, .container .right 


.container .left 


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

優點缺點使用display來實現：

.container 


.container .left, .container .right 


.container .left 


.container .right
優點

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

缺點暫未發現

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

.container 


.container .left 


.container .right
優點

缺點使用flex和設定height實現

html,body


.container 


.container .left 


.container .right
優點

缺點

如何批量對字串進行左，右，中對齊

如何對字串進行左，右，中對齊 某字典儲存了一系列屬性值，在程式中，我們想要以以下工整的格式將其內容輸出，如何處理？loddist 100.0,smallcull 100.0,distcull 100.0,trilinear 100.0,farclip 100.0,import os,stat imp...

FLASH 中如何做到與載入SWF檔案之間的互動！

swf與載入的swf的通訊方法 風雲之無間道 a.swf載入b.swf,在b.swf中使用a.swf的方法和屬性。在a.swf的文件類中 var ldr loader new loader ldr.contentloaderinfo.addeventlistener event.init,loade...

工作中如何做到效率最大化？

1 制定每日事項清單 使用日事清的日程管理制定乙個工作清單，列出每天待解決的實際任務，內容簡單明瞭，設定每件工作大概完成的時間。逐步完成每天的小任務不但能幫你提高每天的效率，也會有助於實現更遠大的目標。2 優先完成重要的工作 把日事清工作清單中的工作細則按照優先順序排序，解決重要的 高難度的問題之後...