CSS - 让 div 继承一个高度

Posted 2023-03-06

【中文标题】CSS - 让 div 继承一个高度

【英文标题】：CSS - make div's inherit a height

【发布时间】：2011-07-25 09:37:38

【问题描述】：

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

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

问题是我无法让“test_mid_left”（黑色背景）和“test_mid_right”（青绿色背景）从“test_mid_center”（绿色背景）继承高度。我已经尝试过 height: 100% 和 auto，但这些都不起作用。那么如何让它们从内容中继承高度呢？

（我之所以在示例的左右内容中使用“min-height:xx”只是为了说明我说的是哪些框）

【问题讨论】：

我无法打开链接，但不确定是不是我...

【参考方案1】：

正如已经提到的，这不能用浮动来完成，他们不能继承高度，他们不知道他们的兄弟姐妹所以例如边两个浮动不知道中心内容的高度，所以他们可以'不继承任何东西。

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

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

我已经根据您提供的内容提出了一个示例，它确实依赖于固定宽度（您的框架），但我认为它也可以使用灵活的宽度？对于那些在多个背景图像或图像边框完全可用之前我们无法获得支持的花哨的图像边框，它的使用可能很酷。谁知道，我在玩，所以把它贴在那里！

概念证明示例是 here

【讨论】：

嘿 clairesuzy.. 我真的很喜欢你的回答！尽管没有固定宽度我无法让它正常工作:(

嗨，唐，我让它工作了，-jsbin.com/apiqu5 - 请参阅 CSS 中的前两行，IE 确实需要在内部包装器上设置 hasLayout，我使用了 zoom: 1; -hth跨度>

再次嗨.. 在您的新示例中，该框会填满 FF、Safari 和 Chrome 上的整个屏幕，而应该在文本之后停止：S

它在文本之后停止，文本是 p's - 但是它们很短 p's ;) 默认情况下它们是 100% 宽，框架必须从父级获取它的宽度，在这种情况下，它使用 body 元素，如果它在侧边栏中，例如它会更窄 - 尝试调整浏览器的大小或添加更长的 paragraohs

没错！非常感谢:)！

【参考方案2】：

问题

当一个元素浮动时，它的父元素不再包含它，因为浮动已从流中移除。浮动元素不在自然流动范围内，因此所有块元素都会呈现为好像浮动元素不存在一样，因此父容器不会完全展开以容纳浮动子元素。

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

The Mystery Of The CSS Float Property

---

一个潜在的解决方案

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

Equal Height Columns with Cross-Browser CSS

我希望这会有所帮助。

【参考方案3】：

负边距技巧：

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

我想这并不优雅，但它在某些情况下有效。

【参考方案4】：

你需要取出一个浮点数：left;属性...因为当您使用浮动时，父 div 不抓取它的孩子的高度...如果您希望父潜水获得孩子的高度，您需要给父 div 一个 css 属性溢出：隐藏； 但是要解决您的问题，您可以使用 display: table-cell;而不是浮动...它会自动将 div 高度缩放到其父高度...

【参考方案5】：

大多数时候，Previous 父级手动设置了一个高度，因此您可以使用该值作为参考，不需要其他肮脏的技巧，如果数字因任何原因不一样，则可以添加评论添加了原始编号，因此如果您需要更改它，通过搜索所有值，可以调整甚至更改此编号，以便有人为我们解决此编号。