Denis Fedak Denis Fedak - 4 months ago 22
CSS Question

Height 100% when parent height is auto

For example, I have following html:

<html><head>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.col-1{
height: 300px;
}
.col-2{
/*
height: 100% not working, how to stretch col-2 like col-1
*/
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-1">
</div>
<div class="col-md-6 col-2">
</div>
</div>

</body></html>


Height of container is auto, but actual height is defined, because col-1 height is 300px. How to set col-2 height 100% of actual parent height?

Answer

Maybe you should try to use "row row-eq-height" classes.

Try to use <div class="row row-eq-height"></div> instead of <div class="row"></div>

And add this CSS property to your custom CSS

.row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
Comments