Question

我有一个问题（我第三次遇到它）我有一个容器，里面有一个左右div。

如果它们的长度不同（右边长于左边或相反），如何在不使用Javascript的情况下让另一个伸展[高度]。

我不想导致表格，我认为继承会这样做（但它只是继承了auto）。似乎没有一个简单的答案。或者我应该只使用表格！？有什么问题吗？

这个问题让我觉得它应该是多么愚蠢......

提前致谢！

编辑：我举一个例子：

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

如你所知，左边比右边小得多。身高：100％似乎什么都不做。

结果：没有JS支持，这是不可能的。干杯。

Answer 1

如果你需要支持IE6和IE7，我担心你不能在没有表格或javascript的情况下只用css。

对于其他浏览器，您可以进行显示：table-cell和display：table-row way。

当然，如果你真的不需要列高度相等但看起来像是那样的话，那么使用背景图像进行伪装是有效的。

Answer 2

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

对于任何相对简单的人造柱都可以完成这项工作，你只需重复一个图像垂直模仿列的简单实心bg颜色。如果它更复杂，你需要进行排序组合。

有关更多技巧，请参阅我的回复： 2 column CSS div with stretchable height

Answer 3

如果你只是希望它看起来是相同的长度，你可以使用这个丑陋的黑客：

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

基本上，它会导致两列都比它们应该延长1000px，隐藏不需要的位。但不适用于底部边框。

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

匹配内联元素的高度

3 个答案: