Sakutard Sakutard - 7 months ago 194
HTML Question

Bootstrap - Fill remaning height of a column

Using Bootstrap. I want the top div to be of fixed height according to the content and the bottom div to fill out the remaining height of the parent. The total height should be 100%.

HTML:

<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="test">
<div>
Fixed height according to content.
</div>
<div class="fill">
Rest of the height
</div>
</div>
</div>
</div>
</div>


CSS:

html, body{
height: 100%;
}

.container-fluid, .row, .col-lg-6, #test{
height: 100%;
}

.fill {
background-color: #FF0000;
height: 100%
}


However it seems like the bottom div is exactly 100% and overflows. The idea is also that there will be several columns.

Thanks in advance!

Fiddle: https://jsfiddle.net/eb8v57pe/4/

Answer
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      <div id="test">
        <div class="header">
          Fixed height according to content.
        </div>
        <div class="fill">
          Rest of the height
        </div>
      </div>
    </div>
  </div>
</div>

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

html, body{
  height:100%;
  padding: 0;
  border: none;
  margin: 0;
}

.container-fluid, .row, .col-lg-2{
  height: 100%;
}
#test {
  display: table;
  width: 100%;
  height: 100%;
}

#test > .header {
  display: table-row;
  height: 1%;
}

#test > .fill {
  display: table-row;
  background-color: #FF0000;
}
Comments