内联元素的匹配高度答案

【问题标题】：Matching heights of inline elements内联元素的匹配高度
【发布时间】：2009-08-28 20:06:19
【问题描述】：

我有一个问题（实际上是我第三次遇到它），我有一个包含左右 div 的容器。

如果它们的长度不同（右边比左边长，或者相反），我怎样才能让另一个在不使用 Javascript 的情况下拉伸 [in height]。

我不想生成表格，我认为继承会这样做（但它只是继承自动）。似乎没有一个简单的答案。还是我应该只使用桌子！？有什么问题吗？

这个问题让我大吃一惊，因为它应该是多么愚蠢......

提前致谢！

编辑：我举个例子：

<body style="background: #000000 url(????.com);">
    <div id="container" style="margin:0 auto; width:996px; height: auto; background: transparent; overflow:hidden;">
        <div id="left" style="float:left; width:690px">
             <div style="background-color:#FFFFFF;">Content</div>
             <div style="background-color:#FFFFFF;">content</div>
        </div>
        <div id="right" style="float:left; width:306px">
             <div style="background: transparent;">Content<br />Content<br />content<br/>Last line</div>
             <div style="background-color:#FFFFFF;">Content</div>
        </div>
    </div>
</body>

如您所知，左边比右边小得多。 Height:100% 似乎什么也没做。

结果：没有 JS 支持是不可能的。祝大家好运。

【问题讨论】：

您想在标题中使用“身高”吗？要我帮你改一下标题吗？
我还是不知道你问的是高度还是宽度。
高度。我添加了一个示例。
在您的示例中，您（或用户）如何知道一个 div 比另一个短，为什么这很重要？你的问题似乎只是一个红鲱鱼。当它们显然是“块”元素时，为什么要称它们为“内联”元素？
它们是并排的，不是内联吗？它们有背景图像，但是我希望这些容器 div 中的一两个框是透明的以查看背景。如果我将容器的容器设置为背景图像，那么它将阻止我让透明框看到正确的背景。没有红鲱鱼伴侣，我只是认为不需要所有细节。

标签： html css

【解决方案1】：

如果您需要对 IE6 和 IE7 的支持，恐怕您无法在没有表格或 javascript 的情况下仅在 css 中做到这一点。

对于其他浏览器，您可以使用 display: table-cell 和 display: table-row 方式。

当然，如果您并不真的需要列的高度相等，但看起来就是这样，那么使用背景图像来伪装它是可行的。

【讨论】：

如我所想。所以对于我的第二个问题：我“不应该”使用表格有什么理由吗？或者这是否足够第二个官方问题/线程
我认为 jeroen 是对的......我之前发布的答案只有在容器上设置了高度时才有效。如果您使用 javascript 执行此操作，请在 div 上查找名为 scrollHeight 或 overflowHeight 的属性。这将为您提供 div 的高度，并可用于设置其他 div 的高度。
不使用表格的原因有很多，只要看看 SO（渲染时间、屏幕阅读器等）。然而，使用表格也有正当的理由，但我绝对不建议将整个页面包装成一个。我想你必须决定更糟糕的是，表格还是 javascript :-)
嗯，我只是想让我的网站在没有或使用 Javascript 的情况下完全显示... :(
@Zoidberg：我不知道您的解决方案的跨浏览器兼容性，我通常已经使用 jQuery，然后计算和设置高度非常简单。

【解决方案2】：

http://www.alistapart.com/articles/fauxcolumns/

对于任何相对简单的人造柱都可以完成这项工作，您只需垂直重复图像，模仿柱的简单纯色背景色。如果它更复杂，您需要组合排序。

更多技巧请看我的回复： 2 column CSS div with stretchable height

【讨论】：

谢谢，我会看看人造技术。
你有设计的链接吗？

【解决方案3】：

如果你只是想让列看起来长度相同，你可以使用这个丑陋的技巧：

.rightDiv, .leftDiv
{
    margin-bottom: -1000px;
    padding-bottom: 1000px; /*1000 + real padding*/
}
.wrapper
{
    overflow: hidden;
}

基本上，它会导致两列都比应有的范围扩展 1000 像素，并隐藏不需要的位。但不适用于底部边框。

显然，这实际上并没有使它们的长度相同。

【讨论】：