Question

<div class="container-fluid">
    <div calss="row" style="height:20%; display: block;">
        <h1>20 percent height</h1>
    </div>
    <div calss="row">
        <h1>height should be 80 percent</h1>
    </div>
</div>

我尝试了一个显示为here的示例，但是它不起作用。我的要求是，如果我保持第一高度为10％或第二行为20％，那么第二行应该自动占据高度而无需显式设置高度。

Answer 1

使用flex显示。为父级添加display: flex和flex-direction: column，为第二个内容提供flex-grow: 1，它将使该div适合其余空间。

.container-fluid {
  display: flex;
  flex-direction: column;
  height: 500px;
}
.container-fluid div {
  margin: 5px;
  border: 1px solid black;
}
.row-two {
  flex-grow: 1;
}

<div class="container-fluid">
  <div class="row" style="height:20%; display: block;">
    <h1>20 percent height</h1>
  </div>
  <div class="row row-two">
    <h1>height should be 80 percent</h1>
  </div>
</div>

Answer 2

将flexbox用于此类物品。此外，您可以使用4和1代替80和20，这只是重要的比例

.parent {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction:column;
}

.top {
  flex: 80;
  background: red;
}

.bottom {
  flex: 20;
  background: blue;
}

<div class="parent">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

在html中创建共享高度的行？

2 个答案: