Div не распространяется на нижнюю часть его содержимого, когда div внутри него плавают влево - PullRequest
Новая
       15

Div не распространяется на нижнюю часть его содержимого, когда div внутри него плавают влево

1 голос
/ 16 марта 2011

У меня есть 2 деления в виде столбцов, оба плавают влево и имеют значение «Нет».У их контейнера div есть фоновое изображение вверху, поэтому фон находится вверху обоих столбцов.

Я хочу, чтобы у меня также было фоновое изображение внизу столбцов.Я создал еще один div, который находится внутри контейнера div (но вне столбцов) и установил фоновое изображение в его нижнюю часть.

Проблема в том, что этот div не распространяется на нижнюю часть столбцов, которые он содержит.Как я могу сделать это сделать это?Я попытался поиграть с поплавками и очисткой, но безуспешно.

Спасибо

Ответы [ 4 ]

2 голосов
/ 16 марта 2011

В дополнение к методам, уже упомянутым ранее, вы можете добавить overflow:hidden к стилю родительского контейнера.

Это очень известная причуда CSS: вот полная обработка: http://www.quirksmode.org/css/clearing.html

0 голосов
/ 16 марта 2011

Ой, я не заметил, но id установил высоту одного из контейнеров, когда я каркасный, и забыл, что он там был.Снятие высоты и плавающее правое деление исправили это для меня.

В любом случае, спасибо.

0 голосов
/ 16 марта 2011

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

  • Также добавьте float: left к контейнеру div.
  • Или добавьте что-то вроде <div style="clear: both;"></div>до конца контейнера div.
  • Или используйте более гибкий метод clearfix .
0 голосов
/ 16 марта 2011

CSS: 

div#test {
    min-height:100%;
    background-image: url('http://www.google.nl/images/logos/ps_logo2.png');
    background-repeat: no-repeat;
    background-position: bottom;
}

div#wrapper {
    height: 500px;
}

HTML: 

<div id="wrapper">
    <div id="test">Blalalalalala</div>
</div>

Таким образом, у вашего div (#test) будет высота его родителя (#wrapper). http://jsfiddle.net/F95xN/6/ Попробуйте удалить min-height: 100%;, и вы увидите.

...