CSS父级DIV溢出

Question

CSS父级DIV溢出

3

我有一个关于正在制作的网站的问题。我有一个简单的div布局，如下所示:

<body>
    <div id="Container">
        <div id="Logo"></div>

        <div id="Banner">
            <div id="Nav"></div>
        </div>
        <div id="Content">
        </div>

        <div id="footer">Footer</div>
    </div>
</body>

我的CSS如下：

@charset "utf-8";
/* CSS Document */


html, body {
    height:100%;
    padding:0;
    margin:0;
    background-image:url(../layout.img/background_gradient.gif);
    background-repeat:repeat-x;
}

#Container {
    height:100%;
    width:950px;
    margin:auto;

    background-color:#FFFFFF;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
}

#Logo {
    width:160px;
    height:160px;
    float:right;
}

#Banner {
    width:100%;
    height:160px;
}

#Nav {
    width:550px;
    height:33px;
    position:relative;
    top:100px;
    left:50px;
}

#Content {
    clear:both;
}

最终结果可以在这里看到：

http://jsfiddle.net/mczMS/

可以看到，当您向下滚动页面时，“container” div不会随内容拉伸。我知道这可能是非常简单的事情，但今天我的大脑供应有限。哈哈。

- Ben

2个回答

4

如果您从容器中删除height:100%，它将伸展以适应其内容。

- Deeksy

我认为如果高度不是完整高度，那么应该设置为100%。 - cletus

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

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

- cletus · Accepted Answer

尝试添加以下内容：

#container { min-height: 100%; }

在设置了 height 100% 后，你可能还想尝试以下方法：

#container { overflow: auto; }