Как разместить div на высоте его родительского div

Использование Bootstrap 3.0.2. Хотите растянуть div до высоты его родительского div. Не интересно устанавливать сценарий. Есть ли способ сделать это? Пожалуйста, см. Скрипку. Здесь я хочу растянуть синий контейнер до высоты родительского зеленого контейнера.Как разместить div на высоте его родительского div

See Fiddle

<div class="row border-green"> 
    <div class="col-xs-6"> 
     <div class="border-red"> 
      aaaa<br> 
      bbbb<br> 
      cccc 
     </div> 
     <div class="border-red"> 
      dddd 
     </div> 
    </div> 
    <div class="col-xs-6 border-blue"> 
     eeee<br> 
     ffff<br> 
    </div> 
</div>

источник

2015-07-06 fatCop

Это работает для меня: http://stackoverflow.com/questions/4804581/ css-expand-child-div-height-to-parents-height –

Моя вилка: http://jsfiddle.net/6wpfr18y/ –

Дайте класс в родительский DIV: equal-height

Добавьте это в CSS:

.equal-height { 
    display: table; 
} 
.equal-height > div { 
    display: table-cell; 
    float: none; 
    vertical-align: top; 
}

http://jsfiddle.net/jpes2wry/3/

источник

2015-07-06 05:12:31

Flexible box решение отлично работает для вашей проблемы , Добавьте display: flex к родительскому элементу.

Для нынешних читателей Совместимость таблица: Can I use Flexbox

Для будущих читателей, гибкая коробка путь!

.border-red { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: #FF0000; 
 
} 
 
.border-blue { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: #2E2EB8; 
 
} 
 
.border-green { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: #00CC00; 
 
} 
 
.equal-height { 
 
    display: flex; 
 
    display: -ms-flex; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row border-green equal-height"> 
 
    <div class="col-xs-6"> 
 
    <div class="border-red"> 
 
     aaaa 
 
     <br>bbbb 
 
     <br>cccc 
 
    </div> 
 
    <div class="border-red"> 
 
     dddd 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-6 border-blue"> 
 
    eeee 
 
    <br>ffff 
 
    <br> 
 
    </div> 
 
</div>

источник

2015-07-06 05:14:28

Обратите внимание, что это не работает с IE 9 и более ранними версиями, для IE 10 требуется префикс типа '- мс-flex'. Хотя IE 11 полностью поддерживает flex-свойство. См. Больше здесь: http://www.w3schools.com/cssref/css3_pr_flex.asp –

Спасибо, Александр. Я вижу, что кто-то проголосовал за несовместимость с IE. –

Я поддержал простоту решения. Я знаю, что я не должен выражать свое мнение здесь, но люди, использующие старые версии IE, должны быть наказаны. –

Я просто добавить высоту ваших кодов и он работает, просто попробуйте:

.border-red { 
    border-style: solid; 
    border-width: 2px; 
    border-color: #FF0000; 
} 
.border-blue { 
    border-style: solid; 
    border-width: 2px; 
    border-color: #2E2EB8; 
    height: 100%; 
} 
.border-green{ 
    border-style: solid; 
    border-width: 2px; 
    border-color: #00CC00; 
    height: 100px; 
}

источник

2015-07-06 05:19:19

Как разместить div на высоте его родительского div

ответ

Смежные вопросы