Question

我的div包装中有三个高度为20％，50％，30％（= 100％）的盒子。这三个框中的每一个都分为两个div，其中包含“title”和“remaining”类。

HTML：

<div class="wrapper">
   <div class="one">
     <div class="title">title one</div>
     <div class="remaining">remaining one</div>
   </div>

   <div class="two">
     <div class="title">title two</div>
     <div class="remaining">remaining two</div>
   </div>

   <div class="three">
     <div class="title">title three</div>
     <div class="remaining">remaining three</div>
   </div>
</div>

CSS：

.wrapper {
  height:600px;
  width:300px;
  background:white;
}

.one {
  height:20%;
  background: blue;
}

.two {
  height:50%;
  background:yellow;
}

.three {
  height:30%;
  background:red;
}

.title {
  height:30px;
  background:black;
}

.remaining {
  background:green;
  height:65%; 
}

以下是插图：

我的问题是让名为“剩余”的班级占据父div的精确剩余高度。在我的例子中，我把它设置为65％，这显然是不正确的。我也尝试过：

.remaining {
    background:green;
    height: (100% - 30px);
}

但这也不起作用。

这是fiddle。

有没有办法用css解决这个问题？

Answer 1

备注：

您可以使用 calc() 功能执行此操作，如下面的代码所示。

同样从您的小提琴中删除 /* ，因为它使结束大括号无效。

<强>代码：

.remaining { height: calc(100% - 30px); }

由于 .title 的高度为 30px ，您需要 .remaining 才能填写100父母高度的百分比减去标题的高度。

jsFiddle：→here。

<强>段：

.wrapper { height: 600px; width: 300px; background: white; } .one { height: 20%; background: blue; } .two { height: 50%; background: yellow; } .three { height: 30%; background: red; } .title { height: 30px; background: black; } .remaining { background: green; height: calc(100% - 30px); }

<div class="wrapper"> <div class="one"> <div class="title">title one</div> <div class="remaining">remaining one</div> </div> <div class="two"> <div class="title">title two</div> <div class="remaining">remaining two</div> </div> <div class="three"> <div class="title">title three</div> <div class="remaining">remaining three</div> </div> </div>

Answer 2

您始终可以使用flexbox。 .remaining的每个子项都应该是一个flex容器。将轴设置为列，然后告诉.wrapper > div { display: flex; flex-direction: column; } .remaining { background: green; flex: 1; }“增长”：

.wrapper {
  height: 600px;
  width: 300px;
  background: white;
  color: white;
}
.wrapper > div {
  display: flex;
  flex-direction: column;
}
.one {
  height: 20%;
  background: blue;
}
.two {
  height: 50%;
  background: yellow;
}
.three {
  height: 30%;
  background: red;
}
.title {
  height: 30px;
  background: black;
}
.remaining {
  background: green;
  flex: 1;
}

这是一个有效的util.debuglog

<div class="wrapper">
  <div class="item one">
    <div class="title">title one</div>
    <div class="remaining">remaining one</div>
  </div>
  <div class="two">
    <div class="title">title two</div>
    <div class="remaining">remaining two</div>
  </div>
  <div class="three">
    <div class="title">title three</div>
    <div class="remaining">remaining three</div>
  </div>
</div>

{{1}}

但您必须使用供应商前缀。有关更多信息，请转到fiddle

Answer 3

使用calc()计算身高。

.remaining {
  background:green;
  height: calc(100% - 30px);
}

这是一个有效的fiddle。

.wrapper {
  height: 600px;
  width: 300px;
  background: white;
}
.one {
  height: 20%;
  background: blue;
}
.two {
  height: 50%;
  background: yellow;
}
.three {
  height: 30%;
  background: red;
}
.title {
  height: 30px;
  background: black;
}
.remaining {
  background: green;
  height: calc(100% - 30px);
}

<div class="wrapper">
  <div class="one">
    <div class="title">title one</div>
    <div class="remaining">remaining one</div>
  </div>

  <div class="two">
    <div class="title">title two</div>
    <div class="remaining">remaining two</div>
  </div>

  <div class="three">
    <div class="title">title three</div>
    <div class="remaining">remaining three</div>
  </div>

</div>

如何填充嵌套div中的剩余高度？

3 个答案: