设置溢出：隐藏在父级隐藏所有内容

Question

我正在尝试建立一个站点，该站点具有一个“轮播”的 div，这些 div 全部并排（向左浮动），每个都具有全屏宽度。使用 javascript 我计划通过移动“轮播”将不同的 div 移动到视图中。

我的问题是，由于某种原因，当我在包含轮播的 div 上设置溢出：隐藏时，所有内容都被隐藏了。当我使用 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 的溢出：隐藏，则窗格中的内容变得可见，但会添加水平滚动条，您可以滚动并查看所有窗格。有谁知道我做错了什么？

Answer 1

当一个 div 除了浮动或定位元素之外什么都不包含时，它的高度变为 0。那是 div#content_window 的问题。尝试为该 div 添加高度：

#content_window
{
height: 120px;
}

Answer 2

根本不需要使用绝对定位。只需让 content_window 剪辑轮播的视口。见http://jsbin.com/uhubij/edit#html。

CSS 更简单：

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

#carousel {
    width:400%;
}

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

要在窗格之间切换，请将margin-left 添加到#carousel。第一个窗格位于margin-left: 0%（默认）。第二个窗格位于margin-left: -100%;。第三个窗格在margin-left: -200%;，等等...例如，这里是窗格2：http://jsbin.com/uhubij/2/edit#html

HTML基本一样（除了我给你加了一个clearing div）：

<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 style="clear: both;"></div>
    </div>
</div>