html - DIV 不会填满父级的剩余高度

Question

我试图让 .image-cntnr div 填充其父级的剩余高度，但我似乎无法让它工作。我尝试添加一个 float 属性，因为我在其他一些 SO 帖子中读到了它。非常感谢任何帮助。

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

Answer 1

发生这种情况的原因是因为您已将 image-cntnr 元素的高度设置为 100%，但该元素的父级 (v1) 没有设置 '本身没有确定的高度。您为 image-cntnr 提供的 100% 高度需要与某个确定的数字相关。现在，它是 0% 的 100%。为 #v1 元素指定一个确定的高度(例如 200px)，您将看到 100% 的 image-cntnr 有效。