Question

是否可以简单地将子div自动高度调整为其父组件的其他组件未使用的剩余高度？对于下面的例子，.body只会像20px高，因为它只用于内部html。 .body是否可以自动消耗.parent的未使用高度？例如.parent 200px - .head 30px - .foot 30px = .body 120px？

下面的示例将显示比使用空间高得多的.parent黄色框。如果将.body设置为“height：100％”，它将使用父级的高度，而不是尊重.head或.foot元素。

<html>
<head>
<style type="text/css">
.parent {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.head { height: 30px; background-color: blue; }

.body { background-color: #999; }

.foot { height: 30px; background-color: green; }

</style>
</head>
<body>
<div class="parent">
  <div class="head">I'm the head</div>
  <div class="body">I'm the body</div>
  <div class="foot">I'm the foot</div>
</div>
</body>
</html>

这只是一个例子。在我的项目中，.parent高度只能在.parent元素中合理设置。此外，.parent高度基本上由后端代码动态设置。三个内部组织是因为身体是可折叠的，我的头部和脚部都有圆角。

任何建议都非常感谢！

Answer 1

目前有两种方法可以实现这一目标。两者都有点令人不满意。

第一种是通过JS使用DOM信息计算剩余高度。

第二个被称为CSS3 flexbox并且运行良好，但是它是一个不成熟的规范，目前很少support。

不幸的是，使用CSS 2.1无法做到这一点，这也是CSS糟透了的原因之一。

Answer 2

这可以通过负边距轻松实现！

将.body设置为100％高度
假设.head和.foot的高度已知，您可以添加一个负上限+下限，等于.head和.foot的相应高度。< / LI>
由于源排序，.body将“覆盖”.head。要解决此问题，请将position: relative添加到.head。
身体的内在物质需要向下移动一点。您无法直接向.body添加填充。更好的是，在.body内添加另一个潜水，其中填充顶部+底部设置为所需的高度。

Demo here

以上示例的变体：

将.body设置为100％高度
假设.head和.foot的高度已知，您可以添加一个负底边距等于.head和.foot的高度之和。
由于.body将尝试在父级之外流动，因此请将overflow: hidden添加到父级。

Demo here

可以自动加高儿童div？（不是父母的100％）

2 个答案:

可以自动加高儿童div？ （不是父母的100％）

2 个答案:

可以自动加高儿童div？（不是父母的100％）