滚动到页面底部的 CSS 列

Question

我有一个包含以下模板的网页

第一行 COL1 COL2 COL3

现在，我希望 COL1 COL2 COL3 延伸到浏览器的底部，当 COLs 中的内容太长时带有垂直滚动条。

如何在 CSS3 中实现它？

现有样式为:

body,html {
   height:100%;
}

.col1 .col2 .col3 {
   min-height: 100%;
   overflow-y: scroll;    
}

但是现在页面比浏览器长，滚动不起作用。

Answer 1

示例:http://jsfiddle.net/vHkJ8/

这个怎么样:

<style>
body, html {
    height:100%;
    margin: 0;
    padding: 0;
}
.col1, .col2, .col3 {
    width: 30%;
    margin:0 1%;
    min-height: 100%;
    overflow: auto;
    height: 100%;
    float: left;
}
</style>
<div class="col1">1</div>
<div class="col2">2</div>
<div class="col3">3</div>