内的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非常简单的技术，并设置主容器的背景的形象。当一个较长的侧栏伸展主容器时，会降低侧栏的背景。