內的div必須100％的高度

Question

這裏是我的HTML：

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

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

的容器是100％的高度（我使用Firebug檢查它）。但#left_container需要是100％也和它是不是！

下面是我的CSS和screenshot。黃色應該是100％。黃色是的#left-container

html, body { 
    height: 100%; 
} 
#container { 
    position:relative; 
    margin: 0 auto; 
    width: 100%; 
    height:100%; 
    height: auto !important; 
    min-height:100%; 
    background: #fff; 
} 
#left-container { 
    width: 300px; 
    background: #ff0; 
    height:100%; 
    height: auto !important; 
    min-height:100%; 
} 

Answer 1

本文討論這兩個問題和解決方案的細節：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

這可能有助於太：

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id='outer'> 
    <div id='inner'> 
    </div> 
    text 
</div> 

在這裏看到更多的細節在上面：
How to make a floated div 100% height of its parent?

Answer 2

背景你應該能夠只使用

margin:0; 
padding:0; 
height:100%; 

對於conatainers得到你想要的東西。

Answer 3

來解決這個問題的最好辦法是條條框框一點。沒有理由，這兩個容器需要的，如果你只是關心後臺拉伸對他們倆的可拉伸至100％。有一個叫您結合背景的側邊欄成一個單一的背景圖片Faux Columns非常簡單的技術，並設置主容器的背景的形象。當一個較長的側欄伸展主容器時，會降低側欄的背景。