旁邊的大小div具有相同的高度和響應

Question

使用引導，我想要的是左列與左列相同的高度。由於左側的內容是動態的，因此我無法進行修正。你認爲最好的解決方案是什麼？

演示http://daysof.me/interview/

Answer 1

一個經典的例子，你可以用一個表來輕鬆解決它

Working example

看綠色電池 - 它具有相同的高度灰小區。將您的元素放置在綠色單元格中並將高度設置爲100％。

HTML：

<table> 
    <tr> 
     <td class="left"></td> 
     <td class="right"></td> 
    </tr> 
</table> 

CSS：

.left{ 
    width: 300px; 
    height: 100px; 
    background: #e5e5e5; 
} 

.right{ 
    width: 200px; 
    background: green; 
} 

Answer 2

這是可能的，而無需使用腳本

這裏是一個工作實例：Chatfield Drilling

在側邊欄，點擊其中一個標題，看看爲什麼會溢出：auto;幫助。

但

它有它的限制。這是我創建並使用很多的一個小設置。

精讀

• 左列必須是相對的，靜態的，或者你的花車清除

• 溢出：汽車;強烈建議

• 使用絕對定位的元素

• 可能很麻煩，保持

右邊欄將遵循高度的它的兄弟型主體，這就是爲什麼我添加overflow: auto;公式。當這方面的內容更長時，您可以滾動div。

父母的身高基於左側，這是您放置大部分信息的位置。

只需查看此JSFIDDLE，並在您添加更多文本時監視sideBar與它的父級一起增長。

HTML：

<div class="wrapper"> 
    <div class="mainBody"> 
     <p>Lorem ipsum dolor sit amet, ad similique scripserit vix, dictas graecis qui cu, an vis ubique aperiri. Duo in impetus maiorum, pro dolorem alienum liberavisse an. Vim veri inani conclusionemque eu. Omnesque consequat vix id, ut sit ferri illud. Cu cum elitr eirmod, vim dolorum sadipscing ne.</p> 
    </div> 
    <div class="sideBar"></div> 
</div> 

CSS：

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.wrapper { 
    width: 80%; 
    margin: 0 auto; 
    position: relative; 
} 

.mainBody { 
    width: 60%; 
    background: brown; 
} 

.sideBar { 
    width: 35%; 
    height: 100%; 
    position: absolute; 
    right: 0; 
    top: 0; 
    background: tan; 
    overflow: hidden; 
}