Как сделать увеличение высоты div включением плавающего изображения

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

Вот пример кода:

#main_contentbox {
  width: 918px;
  margin: 10px auto;
  padding: 10px 20px 20px 20px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}

#main_contentbox img#sample {
  float: right;
}

<div id="main_contentbox">
  <h1 class="page"> The Event </h1>
  <img id="sample" src="sample.jpg" />
  <p>
    stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p>

  <p>stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!


</div>

Ответ 1

Вы можете изменить поведение того, как родительские блоки обрабатывают плавающий контент, изменив свойство overflow. Это должно сделать это:

#main_contentbox { overflow: hidden; }

Ответ 2

Хотя решение @cletus является технически правильным, установка для переполнения любого значения, отличного от overflow: visible (по умолчанию), initial (явно использовать по умолчанию) или inherit с visible родителем, приведет к тому, что элемент создаст новый контекст форматирования блока. Контекст форматирования блока - это область, в которой плавающие элементы могут взаимодействовать с блоками. Эта ситуация (плавающий элемент внутри элемента non-overflow: visible) явно указана как причина необходимости создания нового контекста:

"если поплавок пересекается с элементом прокрутки, он принудительно перемотает содержимое. Повторная перестановка произойдет после каждого шага прокрутки, что приведет к медленной прокрутке". - MDN

В результате высота будет пересчитана для любых непосредственных детей в этом новом контексте, и их высота будет включена.

Я предпочитаю использовать overflow: auto чтобы выполнить это, когда могу, но scroll, overlay или hidden дадут желаемый результат включения поплавка в вычисление высоты родительского элемента.

Ответ 3

Используя псевдотекст :after, вы можете иметь именованный div автоматически добавить четкое исправление. Добавьте это в свой файл css:

#main_contentbox:after {
  content: "Foo";
  visibility: hidden;
  display: block;
  height: 0px;
  clear: both;
}

При этом вам не нужно ничего делать, чтобы заставить main_contentbox расти, чтобы содержать его поплавки, независимо от того, на какой странице вы находитесь.

Ответ 4

Попробуйте что-нибудь с JavaScript, возможно:

window.onload = FixMyDiv();

function FixMyDiv()
{
  var divh = document.getElementById('main_contentbox').style.offsetHeight;
  var imgh = document.getElementById('sample').style.offsetHeight;

  if(divh < imgh + 50) document.getElementById('main_contentbox').style.height = imgh + 50;


}