Make child div occupy 100% height

Question

I want to make the child div .status be at the height of 100% the .container.

The problem is that that I can't specify an exact height for the .container div, because it must have a dynamic height.

Here is the JSFiddle

Here is the code:

.container {
  width: 100%;
  background-color: red;
  float: left;
  box-sizing: border-box;
}
.progress {
  float: left;
  width: 5%;
  background-color: green;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}
.content {
  float: left;
  width: 80%;
  background-color: #f2f2f2;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}
.status {
  position: relative;
  float: left;
  width: 10%;
  background-color: #c2c2c2;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}
.priority {
  position: relative;
  height: 20px;
  top: 5%;
  background-color: #a2a2a2;
}
.prog {
  position: absolute;
  width: 100%;
  height: 20px;
  bottom: 5px;
  background-color: #d2d2d2;
}

<div class="container">
  <div class="progress">

  </div>
  <div class="content">
    <h2>
   Some Content Text.... Some Content Text....Some Content Text....
   Some Content Text....Some Content Text....
 </h2>
  </div>
  <div class="status">
    <div class="priority">
    </div>
    <div class="prog">
    </div>
  </div>
</div>

Possible duplicate of [How to make a floated div 100% height of its parent?](http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent) — Rose Kunkel, Jun 30 '16 at 13:58
In js, Get window.height(), subtract any headers and footers by getting their respective heights and add this code, if possible, in a resize function that listens to changes in window.height — Nitin, Jun 30 '16 at 14:09

score 0 · Answer 1 · answered Jun 30 '16 at 14:06

Flexbox can do that.

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  background-color: red;
  display: flex;
}
.progress {
  width: 5%;
  background-color: green;
  margin: 5px;
}
.content {
  width: 80%;
  background-color: #f2f2f2;
  margin: 5px;
}
.status {
  position: relative;
  width: 10%;
  background-color: #c2c2c2;
  margin: 5px;
  display: flex;
  flex-direction: column;
}
.priority {
  position: relative;
  height: 20px;
  width: 100%;
  background-color: blue;
}
.prog {
  margin-top: auto;
  width: 100%;
  height: 20px;
  background-color: pink;
}

<div class="container">
  <div class="progress"></div>

  <div class="content">
    <h2>
   Some Content Text.... Some Content Text....Some Content Text....
   Some Content Text....Some Content Text....
   </h2>
  </div>

  <div class="status">
    <div class="priority"></div>

    <div class="prog"></div>
  </div>

</div>

Make child div occupy 100% height

1 Answers1