Внешний Div не будет растягиваться, чтобы соответствовать внутреннему Div (используя очистку)

Я читал о том, как элементы с float атрибут не учитывается их высота. Поэтому я должен использовать clear:both прямо перед концом родительского div, так что он растянется на весь внутренний div.

На этой странице вы можете увидеть, что div с идентификатором full-height-template-container не растягивается по своему внутреннему содержимому, и поэтому нижний колонтитул (авторский текст справа внизу) поднимается слишком высоко на странице.

Макет выглядит так:

<div id="full-height-template-containter">
  <div id="content-container">
    <div id="full-width" style="float:left;"> 
    </div>
    <div style="clear:both;"></div>
  </div>
<div style="clear:both;"></div>
</div>

Что еще я могу попробовать, чтобы внешний тег div простирался над своими детьми?

Заранее спасибо!

Источник

4 ответа

Решение

В #full-height-template-container ты используешь height: 100% что означает, что div занимает 100% высоты родителя.

Если мы проследим в вашем CSS каждый родительский элемент назначен height: 100%, в том числе html а также body элементы, что означает, что высота берется из окна - поэтому в результате div никогда не будет превышать размер окна (но содержимое все равно будет переполнено).

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

Источник

Это общая проблема. Чтобы решить эту проблему, был изобретен взлом clearfix во многих его вариантах.

Источник

Я сталкивался с той же проблемой, пока не вставил эту версию "Clearfix" в верхнюю часть контейнера, которую нужно растянуть так:

CSS:

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML:

<div class="clearfix"> </div>

<span class="doc">
     <a href="../speakers/johnnixon.html" "class="spkrs1">John Nixon</a> 
     <a href="../speakers/pricereveil.html" "class="spkrs2">Henry Wright</a> 
</span>
Источник

Я положил ваш пример на скрипку и дал несколько CSS, чтобы показать div: http://jsfiddle.net/WRzsE/

Вы можете ясно видеть, что это работает отлично, как вы описываете, вы ожидаете этого. Вы делаете что-то еще неправильно, я подозреваю...

Возможно, вы используете position: absolute где-то, что вызовет подъем элемента из его родителя, и заставит родителя не растягиваться (просто мысли здесь вслух...)

редактировать: я только что посмотрел на фактическую страницу (пропустил ссылку). Твои дивы растягиваются просто отлично. Проблема с позиционированием нижнего колонтитула, который установлен в абсолют. Я подозреваю, что вы пытаетесь получить липкий нижний колонтитул, посмотрите на это, работает как шарм. Я использую это все время: http://ryanfait.com/sticky-footer/

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