CODEWITHSUNDEEP
htmlcss
Daniel Kobe
Daniel Kobe

Reputation: 9825

DIV won't fill remaining height of parent

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 */

Upvotes: 2

Views: 3646

Answers (3)

Daniel Kobe
Daniel Kobe

Reputation: 9825

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;
}

Upvotes: 1

noviewpoint
noviewpoint

Reputation: 584

Try adding the following CSS rules:

#v1 {
  position: relative;
}

.image-cntnr {
  position: absolute;
}

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

Upvotes: 0

A.Sharma
A.Sharma

Reputation: 2799

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.

Upvotes: 3

Related Questions