Почему высота моего тега div рассчитывается как 0 в Chrome?

Question

Я работаю над веб-страницей ( текст ссылки ), но у меня возникают проблемы со свойством высоты в Google Chrome. Если вы просматриваете страницу, вы заметите, что цвет фона отсутствует. Это потому, что #mainContent имеет высоту 0px. В Internet Explorer это не так. У кого-нибудь есть идеи?

Answer 1

Это потому, что внутреннее содержание плавает.Родительские элементы не принимают высоту плавающих дочерних элементов.Попробуйте добавить overflow: hidden; к #mainContent css.

Answer 2

Все внутри #mainContent плавающее. Поплавки не изменяют размер контейнера. Самое простое решение состоит в том, чтобы добавить очистку прямо перед концом #mainContent следующим образом:

<div id="mainContent">
<!-- inner bars -->
<div style="clear:both;"></div>
</div>

Answer 3

Ха-ха, это будет сложный вопрос для вас, чтобы проверить, как ответили, потому что есть различные способы очистить поплавки. (Вы также можете попробовать плавающий #mainContent)

Вот замечательная статья quirksmode .

Answer 4

У меня такое чувство, что это будет связано с тем, что содержимое div #mainContent неправильно выталкивает контейнер должным образом. Вы должны быть в состоянии исправить это несколькими различными способами, например, используя очищающий div.

Добавьте следующий код:

.clearfix{
    clear:both;
}

И добавьте div с классом clearfix перед закрытием основного содержимого div:

<div id="mainContent">
    <div id="rightSide">
     ...
    </div>
    <div id="content">
     ...
    </div>
    <div class="clearfix"/>
</div>

Это должно напоминать браузеру принудительно открывать div mainContent для соответствия его содержимому.

Answer 5

попробуйте явно определить значение по умолчанию

высота: автоматический;