Переполнение: видимое сворачивает высоту div до нуля

Я редактирую CSS темы WordPress (двадцать)

Это моя структура HTML:

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="main">
            <div id="filtri_di_ricerca"><img></div>
            <div id="container">
                <div id="content"></div>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</body>

и это мой CSS:

#main {
    position:relative;
    background:#fff;
    overflow:visible;
}

#filtri_di_ricerca img {
    position: absolute;
    top: -96px
}

#filtri_di_ricerca {
    position: absolute;
    top: 0;
    right: 20px;
    width: 250px;
    background-color: #E6E6E6;
}

Мне нужно перекрывать #main Div с #filtri_di_ricerca div, но когда я установил overflow:visible на #main his height падает до нуля... я все еще вижу #container а также #content но фон #main больше не видно... вижу #bodyфон вместо.

Источник

3 ответа

Вам нужно очистить числа для вашего #main div.

/* For modern browsers */
#main:before,
#main:after {
    content:"";
    display:table;
}
#main:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
#main {
    zoom:1;
}

Читайте больше на clearfix

Источник

Это связано с тем, как вычисляется высота элемента div. Все зависит от содержимого, если не установлено фиксированное. Из-за переполнения: видимый, содержимое не нужно вписывать в div. Таким образом, высота div устанавливается на ноль.

Установите некоторую фиксированную высоту для div, и она должна оставаться на этой высоте.

Источник

CSS-позиция # Filterri_di_ricerca является "абсолютной" (так что выходите из естественного потока), и #container не имеет никакого содержимого.

Попробуйте добавить немного содержимого в #content и установить верхнюю часть #content, равную высоте #filatri_di_ricerca

Источник
Другие вопросы по тегам