CSS水平調整DIV子元素高度

Question

我有以下設置，

<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 
#left{ 
    display: inline-block; 
} 
#right{ 
    display: inline-block; 
    min-height: 800px; 
    height: 100%; 
} 

我試圖使容器是什麼都高度的左邊或右邊的div是高。但容器只能調整到#left div的高度？當左邊div的高度小於右邊div時，右邊div與頁腳重疊（顯然是由於最小高度）。 任何想法？

Answer 1

我認爲最快的解決方案是使用display: table-cell來代替。這將是這樣的：

<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

CSS：

#container { 
    display:table; 
    width:100%; 
    border:1px solid red; 
} 
#container div { 
    border:1px solid red; 
    width: 50%; 
} 
#left{ 
    display: table-cell; 
    background-color: lightgray; 
} 
#right{ 
    display: table-cell; 
    height: 100px; 
    background-color: lightblue; 
}