Question

我尝试了一些方法，使用javascript来均衡列的高度，但它很混乱并导致其他问题。

我尝试过纯粹的CSS，但我发现的所有解决方案都有一个退回或另一个。

最受欢迎的似乎是涉及

body, html { height:100%;}
.col{width:50%; height:100%; float:left;}

<body>
<div class="col left">1st col
    <div class="bigdiv">yo</div>
    <div class="bigdiv">yo</div>
    <div class="bigdiv">yo</div>
</div>
<div class="col right">2nd col</div>

但如果其中一列长于页面，则不会延伸。

http://jsfiddle.net/8nAA4/1/

必须有一个简单的方法来做到这一点，我必须是愚蠢的，但我已经尝试了几天不同的方法，并且它正在努力。

php，javascript，html都很简单。 css仍然让我困惑！

Answer 1

使用

body{
    display: table;
}
.col{
    display: table-cell;
}

Demo

两列全高度布局扩展为包含内容

1 个答案: