Question

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

ROW1 COL1 COL2 COL3

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

我如何在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>

Answer 2

经过一段时间的思考，我认为CSS可能无法解决问题。我的推理如下。设置高度100％，这应该从父母计算。如果那里没有行，则从正文中获取数字。但是，如果有一行，则无法仅从父级计算高度。

所以我认为在这种情况下动态设置高度需要javascript。以下代码现在适用于我的情况。只需获取内容块的窗口大小和顶部y位置，并设置高度差异。

<script>
window.onload = window.onresize = function () {
var h = $(window).height() - $('.col1').offset().top -10;
$('.col1').height(h);
}
</script>

CSS列通过滚动扩展到页面底部

2 个答案: