Html CSS - 使 div 继承高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5474951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - make div's inherit a height
提问by donpedroper
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
我正在尝试制作一个带有圆角的框，其中 div 的高度和宽度取决于内容，因此它会自动适应它...
You can see the example here: http://pastehtml.com/view/1duizyf.html
您可以在此处查看示例：http: //pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
问题是我无法让“test_mid_left”（黑色背景）和“test_mid_right”（绿松石背景）继承“test_mid_center”（绿色背景）的高度。我试过高度：100% 和自动，但没有一个工作。那么如何让它们从内容中继承高度呢？
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
（我之所以在例子的左右内容中使用了“min-height:xx”，只是为了显示我说的是哪些框）
回答by clairesuzy
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
正如已经提到的，这不能用浮动来完成，他们不能继承高度，他们不知道他们的兄弟姐妹所以例如侧面的两个浮动不知道中心内容的高度，所以他们不能继承从任何东西。
Usually inherited height has to come from either an element which has an explicit height or if height: 100%;has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element- so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
通常继承的高度必须来自具有明确高度的元素，或者是否height: 100%;已通过显示树向下传递给它..我唯一知道传递的高度不是来自顶部的“树”是一个绝对定位的元素- 例如，您可以绝对定位所有右上左下角和角（无论如何您都知道角的高度和宽度）并且您似乎知道宽度（左/右边框）和顶部/底部）边框的高度，以及顶部/底部中心的宽度，很容易达到 100% - 如果内容增长，唯一需要计算的是右侧/左侧的高度 -
This you can do,even without using all four positioning co-ordinates which IE6 /7doesn't support
即使不使用 IE6 / 7不支持的所有四个定位坐标，您也可以这样做
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
我已经根据您提供的内容举了一个示例，它确实依赖于固定宽度（您的框架），但我认为它也可以使用灵活的宽度？对于那些在多个背景图像或图像边框完全可用之前我们无法获得支持的花哨图像边框来说，它的用途可能很酷..谁知道呢，我正在玩，所以只是把它贴在那里！
proof of concept example is here
概念证明示例在这里
回答by Hristo
The Problem
问题
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
当一个元素被浮动时，它的父元素不再包含它，因为浮动被从流中移除。浮动元素脱离了自然流，因此所有块元素将呈现为好像浮动元素甚至不存在一样，因此父容器不会完全扩展以容纳浮动子元素。
Take a look at the following article to get a better idea of how the CSS Float property works:
请查看以下文章，以更好地了解 CSS Float 属性的工作原理：
The Mystery Of The CSS Float Property
A Potential Solution
一个潜在的解决方案
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
现在，我认为下面的文章类似于您要尝试做的事情。看看它，看看你是否能解决你的问题。
Equal Height Columns with Cross-Browser CSS
I hope this helps.
我希望这有帮助。
回答by Hristo
The negative margin trick:
负边距技巧：
http://pastehtml.com/view/1dujbt3.html
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
我想不优雅，但它在某些情况下有效。
回答by Aram Sargsyan
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden; But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
你需要取出一个 float: left; 属性...因为当您使用 float 时，父 div 不会占用其子项的高度... 但是要解决您的问题，您可以使用 display: table-cell; 而不是浮动......它会自动将div高度缩放到其父高度......
