Question

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

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），您将看到image-cntnr的100％有效。

Answer 2

Flex-box救援。我使用.view课程，并使用flex将其显示更改为flex-direction: column。这持续了相同的行为，但是当我将flex-grow: 1添加到.image-cntnr时，它会正确占用所有剩余空间而不会超过剩余空间。

查看更新的代码集。

继承我添加/更改的CSS

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

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

Answer 3

尝试添加以下CSS规则：

#v1 {
  position: relative;
}

.image-cntnr {
  position: absolute;
}

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

DIV不会填补父母的剩余高度

HTML

CSS

3 个答案: