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

Question

У меня есть <div>, который должен быть автоматически настроен в соответствии с содержанием в нем. Как я могу это сделать? Прямо сейчас мой контент выходит из <div>

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

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

Answer 1

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

min-height: 100px;
overflow: hidden;

Answer 2

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

.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>

Answer 3

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

min-height: xxx;
overflow: hidden;

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

Answer 4

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

overflow: hidden;
height: 1%;

Answer 5

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

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

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

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

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

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

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

Answer 6

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

#container {
clear:both;
}

Готово.

Answer 7

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

Answer 8

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

Answer 9

просто используйте следующие

height:auto;

Answer 10

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

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