CSS - 使 div 继承高度 [英] CSS - make div's inherit a height

问题描述

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

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

问题是我无法让test_mid_left"(黑色背景)和test_mid_right"(绿松石背景)继承test_mid_center"(绿色背景)的高度.我试过高度:100% 和自动，但没有一个工作.那么如何让它们从内容中继承高度?

(我之所以在例子的左右内容中使用了min-height:xx"，只是为了显示我说的是哪些框)

解决方案

如前所述，这不能用浮动来完成，他们不能继承高度，他们不知道他们的兄弟姐妹所以例如旁边的两个浮动不知道中心内容的高度，所以他们不能继承任何东西.

通常继承的高度必须来自具有明确高度的元素，或者如果 height: 100%; 已经通过显示树向下传递给它..我唯一的东西意识到不是来自树"顶部的高度传递是一个绝对定位的元素 - 所以你可以例如绝对定位所有的右上角和左下角(你知道角的高度和宽度)而且你似乎知道宽度(左/右边框)和顶部/底部)边框的高度，以及顶部/底部中心的宽度，很容易在 100% -如果内容增长，唯一需要计算的是右侧/左侧的高度 -

即使不使用 IE6 /7 不支持的所有四个定位坐标，您也可以这样做

我已经根据您提供的内容举了一个示例，它确实依赖于固定宽度(您的框架)，但我认为它也可以使用灵活的宽度?对于那些在多个背景图像或图像边框完全可用之前我们无法获得支持的花哨图像边框来说，它的用途可能很酷.

概念证明示例是这里

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...

You can see the example here: 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?

(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)

解决方案

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 -

This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support

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

这篇关于CSS - 使 div 继承高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！