DIV won't fill remaining height of parent

Question

I'm trying to get the .image-cntnr div to fill the remain height of its parent but I can't seem to get it to work. I tried adding a float property because I read that in some other SO posts. Any help much appreciated.

Link to Codepen.

HTML

<div id="views-cntnr">
  <div id="r1" class="view-row">
    <div id="v1" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">R-Theta</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
      <div class="image-cntnr"></div>

    </div>
    <div class="col-handle" id="r1-l-r">
    </div>
    <div id="v2" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">Cartesian</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
  <div id="r1-r2-u-d" class="row-handle"></div>
  <div id="r2" class="view-row">
    <div id="v3" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">Longitudinal</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
  <div class="row-handle" id="r2-r3-u-d">
  </div>
  <div id="r3" class="view-row">
    <div id="v4" class="view">
      <div class="v-header">
        <span class="v-title">Console</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
}

.image-cntnr {
  width: 100%;
  height: 100%;
  background-color: cyan;
}
/* VIEWS */

/* VIEW HEADERS */

.v-header {
  position: relative;
  padding: 3px;
  border-bottom: #bfbfbf 1px solid;
  background-color: #1a1b1c;
  color: #ccc;
  font-weight: 900;
  font-size: 16px;
}

.v-title {
  position: relative;
  left: 35px;
}

#v4 .v-title {
  left: 6px;
}


/*VIEW BTNS */

.vh-btn {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  background-color: #343436;
  color: white;
  border: black 1px solid;
  position: absolute;
  top: 4px;
}

.vh-btn:hover {
  background-color: #4d4d50;
}

.v-settings {
  left: 6px;
}

.v-close {
  right: 5px;
}


/* view btns */


/* view headers */

#views-cntnr {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* HANDLES */

#r1-l-r {
  background-color: DodgerBlue;
  width: 6px;
  cursor: col-resize;
}

.row-handle {
  background-color: DodgerBlue;
  height: 6px;
  cursor: row-resize;
}

/* handles */

/* ROWS */


/* ROW 1 */

#r1 {
  display: flex;
}

#r1 .view {
  flex-grow: 1;
  border: #bfbfbf 1px solid;
  border-top: none;
  border-right: none;
}

#r1 .view:last-child {
  border-left: none;
}


/* row 1 */


/* ROW 2 */

#r2 .view {
  border: #bfbfbf 1px solid;
  border-top: none;
  flex-grow: 1;
}

#r2 {
  display: flex;
}


/* row 2 */


/* ROW 3 */

#r3 .view {
  border: #bfbfbf 1px solid;
  border-top: none;
  flex-grow: 1;
}

#r3 {
  display: flex;
}


/* row 3 */


/* rows */


/* views */

Setting both width and height will likely stretch to the property that is met first. Take the width off and see what result you get. Another option is to use inherit. http://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent — Daniel, Mar 20 '16 at 06:08
possible duplicate: http://stackoverflow.com/q/31329835/3597276 — Michael Benjamin, Mar 20 '16 at 11:36

score 2 · Answer 1 · answered Mar 20 '16 at 05:32

2

The reason this is happening is because you have set the height for the image-cntnr element to 100%, but the parent (v1) of this element doesn't have a definite height itself. The 100% height you have given the image-cntnr needs to be relative to some definite number. Right now, it is 100% of 0%. Give the #v1 element a definitive height (say 200px), and you will see that the 100% of the image-cntnr works.

answered Mar 20 '16 at 05:32

A.Sharma

2,771
1
11
24

I tried giving `#v1` a height of `100%` but it doesn't help. I dont want to set a fixed height because the height will change since the views are resizable. – Daniel Kobe Mar 20 '16 at 05:38

Daniel Kobe · Accepted Answer · 2016-03-20T07:50:12.950

Flex-box to the rescue. I took the .view class and changed its display to flex with a flex-direction: column. This perserved the same behavior that was already in place but when I added flex-grow: 1 to .image-cntnr it took up all of the remaining space properly without being larger than the remain space.

Take a look at the updated codepen.

Heres the css that I add/changed

.view {
  display: flex;
  flex-direction: column;
}

.image-cntnr {
  background-color: cyan;
  flex-grow: 1;
}

score 0 · Answer 3 · answered Mar 20 '16 at 05:37

0

Try adding the following CSS rules:

#v1 {
  position: relative;
}

.image-cntnr {
  position: absolute;
}

.row-handle {
  z-index: 2;
}

answered Mar 20 '16 at 05:37

noviewpoint

574
1
10
20

I see, but now its larger then the parent. – Daniel Kobe Mar 20 '16 at 05:41

DIV won't fill remaining height of parent

HTML

CSS

3 Answers3