将overflow:hidden应用于父元素会隐藏所有内容

Question

我正在尝试建立一个网站，其中有一系列相邻的div组成的“轮播”，每个div都具有全屏宽度（向左浮动）。我计划使用javascript通过移动"轮播"来显示不同的div。

我的问题是，当我在包含轮播的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 去掉，那么窗格中的内容就会变得可见，但是会出现水平滚动条，你可以滚动并查看所有窗格。有人知道我做错了什么吗？

- bb89

---

在最后一个div之后清除divs：<div style="clear:both"></div> - Tim Rodham

Answer 1

当一个 div 元素内只包含浮动或定位元素时，它的高度会变为 0。这就是 div#content_window 的问题所在。尝试为该 div 添加一个高度：

#content_window
{
height: 120px;
}

- Salman A

---

是的！这就是问题所在。非常感谢你！ - bb89

Answer 2

完全没有必要使用绝对定位。只需让 content_window 剪辑走道carousel的视口即可。请参见 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;
}

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

HTML基本上相同（除了我为您添加了清除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>

- Ben Lee

---

感谢您的快速回复。我已将轮播图绝对定位，以便可以使用JavaScript调整“left”属性。如果我错了，请纠正我，但我认为如果不在轮播图上使用绝对定位，我将无法调整左边属性。也许有其他方法可以水平移动轮播图而不调整左边吗？窗格宽度为25％，因为我将轮播图的宽度设置为400％（有4个窗格，因此400％的25％为100％）。 - bb89

你可以在外部容器上加上 margin-left: 50px;。但是如果你将轮播图向右移动50像素，你还必须调整视口的宽度。你不能让视口宽度为100%并且向右移动50像素，否则右侧的50像素将被裁剪掉。 - Ben Lee

整个重点是要被切断。每个窗格应该与视口的大小相同，以便一次只能看到一个窗格。我的计划是通过将轮播向右或向左移动来改变可见的窗格。因此，任何在屏幕上不可见的窗格，无论是在右边还是左边，都需要隐藏起来。所以，如果视口宽度为1000像素，那么每个窗格的宽度就是1000像素。如果我想显示第一个窗格，我会在轮播上设置left:0。如果我想显示第二个窗格，left就会是-1000，依此类推。明白我的意思吗？ - bb89

是的，当然，我明白了。您只需要添加一个 margin-left: N00% 就可以切换到第 N+1 个窗格。请查看我的答案中的更新。我之前对于您提到的“50像素水平”有些困惑。 - Ben Lee

啊，现在我明白了，是我自己搞混了 =)。你写的是 "top: 50px"，而不是 "left: 50px;"。傻瓜。无论如何，我的答案更新仍然向你展示了如何进行面板切换。如果你想要整个东西垂直下移50像素，只需在外部的 "content_window" 中添加 margin-top: 50px; 即可。 - Ben Lee