CSS - 使div继承高度

Question

我正在尝试制作一个带圆角的方框，其中div的高度和宽度取决于内容，因此它会自动调整到它...

您可以在此处查看示例：http://pastehtml.com/view/1duizyf.html

问题是我无法获得“test_mid_left”（黑色背景）和“test_mid_right”（绿松石背景）来继承“test_mid_center”（绿色背景）的高度。我已经尝试过高度：100％和自动，但没有任何工作。那么如何让它们从内容中继承高度？

（我在示例的左右内容中使用“min-height：xx”的原因只是为了显示我正在谈论的框）

Answer 1

正如已经提到的，这不能用浮子来完成，它们不能继承高度，他们不知道他们的兄弟姐妹，所以例如侧面两个花车不知道中心内容的高度，所以他们可以不接受任何东西。

通常，继承的高度必须来自具有明确高度的元素，或者height: 100%;已经通过显示树向下传递给它。我唯一知道的就是传递高度没有来自“树”的顶部是一个绝对定位的元素 - 所以你可以例如绝对定位所有右上角的左下角和角（你知道角的高度和宽度）无论如何）当你似乎知道宽度（左/右边框）和顶部/底部边框的高度，以及顶部/底部中心的宽度，很容易达到100％ - 唯一需要计算的是如果内容增长，右/左侧的高度 -

即使不使用IE6 / 7 不支持的所有四个定位坐标，

我根据你提供的内容提出了一个例子，它确实依赖于固定宽度（你的框架），但我认为它也可以灵活地使用宽度？对于那些花哨的图像边框来说，这可能很酷，我们无法获得支持，直到多个背景图像或图像边框变得完全可用..谁知道，我在玩，所以只是坚持下去！

概念验证示例是 here

Answer 2

问题

当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除。浮动元素不在自然流中，因此所有块元素都将呈现为浮动元素不在那里，因此父容器不会完全展开以保存浮动子元素。

请查看以下文章，以更好地了解CSS Float属性的工作原理：

The Mystery Of The CSS Float Property

---

潜在解决方案

现在，我认为以下文章类似于您正在尝试做的事情。看看它，看看你是否能解决问题。

Equal Height Columns with Cross-Browser CSS

我希望这会有所帮助。

Answer 3

负边缘技巧：

http://pastehtml.com/view/1dujbt3.html

我认为不优雅，但在某些情况下可行。

Answer 4

你需要拿出一个浮子：左;属性...因为当你使用浮动时，父div没有grub它的孩子的高度...如果你想让父潜水得到孩子的高度你需要给父div一个css属性溢出：隐藏; 但要解决您的问题，您可以使用display：table-cell;而不是浮动......它会自动将div高度缩放到其父高......

Answer 5

大多数时候，Previous parent 有一个手动设置的 heigt，因此您可以使用该值作为参考，不需要其他肮脏的技巧，如果由于任何原因数字不相同，则可以评论加上原来的数字，所以如果你需要改变它，通过搜索所有的值，这个可以调整甚至改变，在有人为我们解决这个问题的时候。