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

Question

我正在尝试建立一个网站,其中有一个div的"旋转木马",它们都是并排(左侧浮动),每个都有一个全屏宽度.使用javascript我打算通过移动"轮播"将不同的div移动到视图中.

我的问题是,由于某种原因,当我设置溢出时:隐藏在包含轮播的div上,所有内容都被隐藏.当我用萤火虫检查时,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;
}