Как автоматически настроить высоту <div> в соответствии с содержимым в ней?

Ответ 1

Попробуйте выполнить следующую разметку вместо прямого указания высоты:

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  float: left;
  min-height: 100px;
  width: 260px;
}

<div class="box-centerside">
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
</div>

Ответ 2

Просто напишите "min-height: XXX;" И "переполнение: скрыто"; и вы не справитесь с этой проблемой Как этот

min-height: 100px;
overflow: hidden;

Ответ 3

Просто напишите:

min-height: xxx;
overflow: hidden;

то div автоматически примет высоту содержимого.

Ответ 4

Я использовал следующее в DIV, которое нужно изменить:

overflow: hidden;
height: 1%;

Ответ 5

Я сделал некоторую доработку, чтобы сделать автоматическую настройку высоты для моего проекта, и я думаю, что нашел решение

[CSS]
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;

Это может быть привязано к первому div (например, warpper, но не к body или html, потому что страница не будет прокручиваться вниз) в вашем файле css и унаследована другими дочерними классами и записывается в них overflow: inherit;.

Примечание. Нечеткой вещью является то, что моя netbeans 7.2.1 IDE выделяет overflow: inherit; как Unexpected value token inherit, но весь современный браузер отлично читает этот атрибут.

Это решение очень хорошо работает в

• firefox 18 +
• chorme 24 +
• т.е. 9 +
• опера 12 +

Я не тестирую его в предыдущих версиях этих браузеров. Если кто-то проверяет это, это будет хорошо.

Ответ 6

Не устанавливайте height. Вместо этого используйте min-height и max-height.

Ответ 7

Если вы еще не получили ответ, ваш "float: left;" что вы хотите. В вашем HTML создайте контейнер под вашими закрывающими тегами, которые имеют плавающие приложения. Для этого контейнера включите это как ваш стиль:

#container {
clear:both;
}

Готово.

Ответ 8

используйте только

height:auto;

Ответ 9

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

Ответ 10

Простым ответом является использование overflow: hidden и min-height: x(any) px, который автоматически отрегулирует размер div.

height: auto не будет работать.

Ответ 11

Задайте высоту для последнего заполнителя div.

    <div class="row" style="height:30px;">
    <!--placeholder to make the whole block has valid auto height-->

Ответ 12

Min- Height : (some Value) units  

---- Используйте только этот фрагмент элементов, в которых вы не можете использовать переполнение, например подсказка

Кроме того, вы можете использовать свойство переполнения или минимальную высоту в соответствии с вашими потребностями.

Ответ 13

Вы можете попробовать, тег div будет автоматически соответствовать высоте содержимого внутри:

height: fit-content;

Ответ 14

<div> должен автоматически расширяться. Я предполагаю, что проблема в том, что вы используете фиксированный height:100px;, попробуйте заменить его на min-height:100px;

Ответ 15

используйте min-height вместо height

Ответ 16

Я исправил свою проблему, установив позицию элемента внутри div в относительный;

Ответ 17

Я просто использовал

overflow: hidden;

И это сработало для меня правильно. У этого div были некоторые плавающие левые divs.

Ответ 18

height: 59.55%;//Сначала укажите ваш рост, затем сделайте переполнение auto overflow: auto;

Ответ 19

После всех попыток у меня сработало следующее:

float: left; width: 800px;

Попробуйте в Chrome, проверив элемент, перед тем как поместить его в файл CSS.

Ответ 20

Просто используйте этот тип дисплея:

display: inline-block;