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

解决这个问题的最好方法是在框外思考一下。如果您只关心两个容器的背景拉伸，那么两个容器都没有理由需要伸展到100％。有一种非常简单的技术称为Faux Columns，您可以将两个侧边栏的背景合并为一个背景图像，并将主容器的背景设置为该图像。当较长的侧边栏拉伸主容器时，它会降低两个侧边栏的背景。

Answer 3

你应该只能使用

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

让容器得到你想要的东西。

内部div需要100％的高度

3 个答案: