Имейте родительский размер размера DIV по размеру ребенка DIV

Question

У меня есть родительский контейнер, который инкапсулирует несколько дочерних контейнеров. Детские контейнеры имеют высоту в зависимости от количества текста, который они хранят. Я хотел бы, чтобы дочерние контейнеры определяли высоту родительского контейнера. Поэтому, если дочерний контейнер имеет высоту 40 пикселей, высота родительского контейнера должна быть 80 пикселей. Если дочерний контейнер имеет высоту 100px, высота родительского контейнера должна быть 140px (40px fixed + 100px variable).

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

Мой родительский DIV с фиксированной высотой (дивы ведут себя, как ожидалось)

.resultsbox{ 
    width: 800px; 
    position: relative; 
    left: 0px; 
    right: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    border-top-style: solid; 
    border-top-width: 2px; 
    border-top-color: #DDD; 
    border-radius: 5px; 
    height: 400px; 
} 

jsFiddle пример с заданной высотой:

http://jsfiddle.net/Uj5FP/6/

Мой родительский DIV, без высоты устанавливается (родителю высота ISN» t достаточно, чтобы держать ребенка)

.resultsbox{ 
    width: 800px; 
    position: relative; 
    left: 0px; 
    right: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    border-top-style: solid; 
    border-top-width: 2px; 
    border-top-color: #DDD; 
    border-radius: 5px; 
} 

jsFid DLE, без набора высоты:

http://jsfiddle.net/Uj5FP/7/

Как сделать родительскую высоту автонастройка правильно?

Answer 1

Вот еще одна попытка. Оберните абсолютно разместить элементы в <div class='absolute-panel'>:

<div class='resultsbox'> 
    <div class='absolute-panel'> 
     <div class='reviewtitle'>  
      <strong>Fun</strong> 
     </div> 
     . 
     . 
     . 
     <div class='reviewstatsright'>  
      <span class='text-info'> 
       <dt>Rate</dt><dd>$50</dd> 
      </span> 
      <span class='text-info'> 
       <dt>Tip</dt><dd>$10</dd> 
      </span> 
     </div> 
    </div><!-- .absolute-panel --> 
    <div class='reviewbody'> 
     <p>What a great time!</p> 
     <cite>-Rodger</cite> 
    </div> 
</div> 

для CSS:

.absolute-panel { 
    border: 1px solid blue; 
    width: 800px; 
    height: 150px; 
    position: relative; 
    left: 0px; 
    right: 0px; 
} 

Для .resultsbox, вынимают абсолютное позиционирование ...

.resultsbox { 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    border-top-style: solid; 
    border-top-width: 2px; 
    border-top-color: #DDD; 
    border-radius: 5px; 
    border-left: 1px solid red; 
} 

Для .reviewbody вынимают абсолютное позиционирование ... и добавить 40px нижнюю прокладку (если необходимо):

.reviewbody { 
    margin-top: 20px; 
    margin-bottom: 20px; 
    padding-bottom: 40px; 
    border: 1px dotted red; 
} 

Комментарий
Я добавил некоторые цветные границы, чтобы следить за вещами, и они могут быть удалены.

Фокус в том, чтобы определить панель фиксированной высоты, чтобы добавить все ваши точно расположенные элементы.

После этого добавьте свое тело обзора с переменной высотой.

скрипку: http://jsfiddle.net/audetwebdesign/8mRVp/

Answer 2

Есть много вещей на этой странице, вы могли бы сделать другой и гораздо проще, но это уже другой разговор.

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

И еще один вариант, который я использую для четкого Фикс: http://nicolasgallagher.com/micro-clearfix-hack/

Разница заключается в том, если у вас есть какое-либо содержимое проливая из коробки, переполнения: скрытый будет скрывать и микро clearfix покажет.