Question

我试图让容器中的所有div与最大的div具有相同的高度。基本上所有div都是容器内100％的高度，并且没有固定任何div的高度。

以下是我设法提出的内容，但我似乎无法让它在所有浏览器上运行。有没有办法实现这个结果，但没有使用jquery，javascript。

以下结果是通过设置容器高度，但我希望实现此目的，没有固定的高度，因为内容会发生变化。

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
</head>

<body>

<div style="width: 500px; background-color: fuchsia; height: 400px; display: table">
    <div style="display: table-row; height: 100%">
        <div style="width: 50%; background-color: blue; float: left; height: 100%; display: table-cell">col 1</div>
        <div style="width: 50%; background-color: green; float: left; height: 100%; display: table-cell">col 2<br />
            <br />
            <br />
            <br />

        </div>
    </div>
    <div style="display: table-row; height: 100%">
        <div style="width: 30%; background-color: blue; float: left; height: 100%; display: table-cell">col 1</div>
        <div style="width: 30%; background-color: green; float: left; height: 100%; display: table-cell">col 2<br />
            <br />
            <br />
            <br />
            <br />
        </div>
    </div>
</div>





</body>
</html>

Answer 1

要使所有div 出现，好像它们具有相同的高度，您可以使用伪元素将相应的背景放在每个div的后面。然后这些伪元素将采用包装器div的高度，而divper-div又由最高div的高度决定。

在Tuts +上查看该技术的完整说明：Solving the Equal Height Column Conundrum

如何实现等高跨浏览器div

1 个答案: