内部div需要100％的高度。

Question

内部div需要100％的高度。

7

这是我的HTML代码：

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

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

容器的高度为100%（我用Firebug检查过）。但是#left_container也需要是100%，但它不是！

以下是我的CSS和截图。黄色应该是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%;
}

- Stijn Leenknegt

4个回答

0

   
<style>
    #outer-container {
        height:200vh;
        width:100%;
         position:relative;
        background-color:orange;
    }
    #left-container{
        position:absolute;
       width:100%;
       height:100%;
        background-color:blue;
    }
</style>

<body>

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

</body>

- asbupsilon

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

0

解决这个问题的最佳方式是开拓思维。如果您只关心两个容器的背景拉伸，那么没有必要让它们都拉伸到100％。有一种非常简单的技术叫做Faux Columns，您可以将两侧边栏的背景合并为一个单一的背景图像，并将主容器的背景设置为该图像。当较长的侧边栏拉伸主容器时，它会拉下两侧边栏的背景。

- Wex

-3

你应该可以只使用

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

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

- Matt H

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Johnson · Accepted Answer

本文详细讨论了问题及解决方案：

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>

关于上述内容的更多细节请参见：
如何使浮动的div高度占满其父元素的100%？