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

Question

Это проблема. У меня есть 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>

Answer 1

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

#main_contentbox { overflow: hidden; }

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 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;


}