Настройка переполнения: скрыто на родительском элементе скрывает весь контент

Question

Я пытаюсь настроить сайт, у которого есть "карусель" 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 в основном такой же (за исключением того, что я добавил для вас очищающий 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>