gpt4 book ai didi

css - 可以自动高度子 div 吗? (不是 parent 的 100%)

转载 作者:行者123 更新时间:2023-11-28 13:35:33 25 4
gpt4 key购买 nike

是否可以简单地将子 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 高度基本上是由后端代码动态设置的。三个内部 div 组织是因为 body 是可折叠的,我的头部和 footer 有圆 Angular 。

非常感谢任何建议!

最佳答案

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

  1. .body 设置为 100% 高度
  2. 假设 .head.foot 的高度已知,您可以添加负的顶部和底部边距等于 .head 各自的高度.foot
  3. 由于源顺序,.body 将“覆盖”.head。为了解决这个问题,将 position: relative 添加到 .head
  4. 正文的内部内容需要向下移动一点。您不能直接向 .body 添加填充。更好的是,在 .body 中添加另一个 dive,并将 padding top + bottom 设置为所需的高度。

Demo here

上述示例的变体:

  1. .body 设置为 100% 高度
  2. 假设 .head.foot 的高度已知,您可以添加一个等于 .head< 高度之和的负底边距.foot.
  3. 由于 .body 将尝试流出父级,因此将 overflow: hidden 添加到父级。

Demo here

关于css - 可以自动高度子 div 吗? (不是 parent 的 100%),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9876871/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com