自动高度 div 保持到其内容答案

【问题标题】：auto height div holder to its content自动高度 div 保持到其内容
【发布时间】：2012-07-12 23:30:53
【问题描述】：

我有一个 div 持有人，其中有一组 div 作为孩子。问题是内容随高度而变化，具体取决于其子项的内容，那么如何将持有人 div 的 css 属性设置为自动调整为其子项的高度总和？

我已经尝试了 div 持有者 css 的几种配置，例如 min-height、padding:auto 等。但没有成功。

这里我放了代码：http://jsfiddle.net/nuAQY/

谢谢。

【问题讨论】：

标签： css html

【解决方案1】：

只需删除孩子divs 的高度。

当您声明高度时，无论内容是什么，它始终是那个高度，所以当内容改变时，孩子的高度不会改变，所以支架的高度也不会改变。

.holder {
    width:250px;
    min-height:50px;
    border:1px solid #EDEDED;
}

.header {
    width:100%;
}
.body {
    width:100%;
}
.footer {
    width:100%;
}

【讨论】：

是的，你的 div 肯定永远是你的子 div 的组合高度的高度吗？我在这里错过了什么吗？它们是漂浮的还是什么？
嗨 tedski，问题是标题不能超过设置的高度，即 20px，所以如果没有设置，它会破坏我的结构。只有 body 可以不设置高度。
所以只需删除 .body 类的高度

【解决方案2】：

创建一个名为 clear 的类，并将其放在您的最后一个 div 子元素之后，但仍位于持有者中。

像这样：

.clear { width: 100%; height: 0px; clear: both; display: block; }

那么……

<div class="holder">
<div class="child"></div>
<div class="child"></div>
...
<div class="child"></div>
<div class="clear"></div>
</div>

【讨论】：

在你的 CSS 中去掉你的身高。见：jsfiddle.net/nuAQY/1
这不会解决它，因为 div 没有浮动。真的没什么好说的。
你说得对，我在阅读中稍微向前跳了一下，并认为这将是人们问的更常见的问题之一，但我在 Fiddle 中的解决方案仍然可以解决它。

【解决方案3】：

问题是您在所有 DIV 上都设置了高度，但内容超过了该高度，所以它用完了。您要么必须删除高度，要么为每个 DIV 设置overflow:auto，但随后您将获得一个滚动条。如果想隐藏多余的内容，可以使用overflow: hidden

【讨论】：