brinch brinch - 3 months ago 14
CSS Question

How to fill remaining height inside nested div?

I have three boxes with heights 20%, 50%, 30% (=100%) inside my div wrapper. Each of the three boxes are split in two divs with classes "title" and "remaining".

HTML:

<div class="wrapper">
<div class="one">
<div class="title">title one</div>
<div class="remaining">remaining one</div>
</div>

<div class="two">
<div class="title">title two</div>
<div class="remaining">remaining two</div>
</div>

<div class="three">
<div class="title">title three</div>
<div class="remaining">remaining three</div>
</div>
</div>


CSS:

.wrapper {
height:600px;
width:300px;
background:white;
}

.one {
height:20%;
background: blue;
}

.two {
height:50%;
background:yellow;
}

.three {
height:30%;
background:red;
}

.title {
height:30px;
background:black;
}

.remaining {
background:green;
height:65%;
}


Here is an illustration:



My problem is getting the class called "remaining" to take up the exact remaining height of the parent div. In my example I set it to 65% which is obviously not correct. I also tried:

.remaining {
background:green;
height: (100% - 30px);
}


but that didn't work either.

Here is a fiddle.

Is there some way to solve this with css?

Answer

Use calc() to calculate your height.

.remaining {
  background:green;
  height: calc(100% - 30px);
}

Here's a working fiddle.

.wrapper {
  height: 600px;
  width: 300px;
  background: white;
}
.one {
  height: 20%;
  background: blue;
}
.two {
  height: 50%;
  background: yellow;
}
.three {
  height: 30%;
  background: red;
}
.title {
  height: 30px;
  background: black;
}
.remaining {
  background: green;
  height: calc(100% - 30px);
}
<div class="wrapper">
  <div class="one">
    <div class="title">title one</div>
    <div class="remaining">remaining one</div>
  </div>

  <div class="two">
    <div class="title">title two</div>
    <div class="remaining">remaining two</div>
  </div>

  <div class="three">
    <div class="title">title three</div>
    <div class="remaining">remaining three</div>
  </div>

</div>

Comments