html - 设置溢出 :hidden on parent hides all content

Question

我正在尝试建立一个网站，该网站有一个 div 的“旋转木马”，这些 div 都是并排(向左浮动)，每个都具有全屏宽度。我计划使用 javascript 通过移动“旋转木马”将不同的 div 移动到 View 中。

我的问题是，出于某种原因，当我在包含轮播的 div 上设置 overflow:hidden 时，所有内容都被隐藏了。当我用 Firebug 检查时，div 显示在正确的位置，但没有任何内容可见。

这是 HTML:

<div id="content_window">
    <div id="carousel">
        <div id="p_home" class="pane">
            Home!
        </div>
        <div id="p_about" class="pane">
            About!
        </div>
        <div id="p_services" class="pane">
            Services!
        </div>
        <div id="p_contact" class="pane">
            Contact!
        </div>
    </div>
</div>

还有 CSS:

#content_window
{
    position:relative;
width:100%;
overflow:hidden;
}

#carousel
{
    position:absolute;
    width:400%;
    top:50px;
    left:0;
    overflow:hidden;
}

.pane
{
    float:left;
    width:25%;
    color:White;
    text-align:left;
    margin-top:50px;
}

如果我取消#content_window 的overflow:hidden，那么 Pane 中的内容将变为可见，但会添加水平滚动条，您可以滚动并查看所有 Pane 。有谁知道我做错了什么？

Answer 1

当一个 div 只包含 float 或定位元素时，它的高度变为 0。那是 div#content_window 的问题。尝试向该 div 添加高度:

#content_window
{
height: 120px;
}