2016-11-30 2 views
0

Я думал, что установка min-height собственности будет расширяться, если необходимо, чтобы разместить ее содержимое, но я был в шоке от осознания того, что он не отображает контент вообще, размер. Некоторое содержимое полностью проигрывает от дисплея. Этот код ниже не является точной мыслью кода, но это самое близкое к моей проблеме, которую я могу получить.Почему минимальная высота не увеличивается, чтобы приспосабливать увеличивающийся контент

<div class="parent"> 
     <div class="box"> Box One</div> 
     <div class="box"> Box two</div> 
     <div class="box"> Box three</div> 
     <div class="box"> Box four</div> 
     <div class="box"> Box five</div> 
     <div class="box"> Box six</div> 
    </div> 

    <style> 
     .parent { 
       min-height: 300px; 
       width: 100%; 
       background-color: blue; 
      } 
     .box { 
       width: 50%; 
       height: 50px; 
       color white; 
      } 
    </style> 
+0

Ваш код работает отлично. Его размещение нового контента. См. Https://jsfiddle.net/bro49tg7/ –

+0

Похоже, ваш 'min-height' работает так, как ожидалось ... Чего вы пытаетесь достичь? – andreas

+0

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

ответ

0

Проблема: Вы можете увидеть проблему, когда содержание в увеличении .box и размера браузера уменьшается на мобильную версию. Тогда вы можете увидеть реальную проблему, что содержимое выходит из синего квадрата.

Вы можете увидеть эту проблему здесь: https://jsfiddle.net/bro49tg7/3/ изменить размер экрана на меньший экран.

Чтобы решить эту проблему

Изменить код CSS для этого:

.box{ 
width: 50%; 
min-height: 50px; /* changed this */ 
color: #fff; 
} 
+0

Что это значит? –

+0

@torazaburo, он заставит div содержать весь текст и не выходит из div, что было проблемой на первом месте. – Aslam

+0

в моем случае, хотя содержимое не имеет фиксированных высот, я просто хотел, чтобы он принял высоту его содержимого. сначала это было нормально, но при изменении размера оно было вытолкнуто из родительского содержимого. Я не дал ему высоты, потому что я не был уверен в размере контента. – pedroyanky

-1

Точно так, как говорит Hunzaboy, вам нужна мин-высота на каждую коробку для этой работы. Посмотрите на эту скрипку:

https://jsfiddle.net/6zpek8m6/

.parent { 
    min-height: 300px; 
} 
.box { 
    min-height: 50px; 
}