我刚开始学习CSS,我想要一个包含两个独立列的页面,每个列都有一个滚动条。我的CSS就像(span4和span8是div类)
body {
height: 100%;
overflow: hidden; }
.span4 {
height: 100%;
overflow: auto; }
.span8 {
height: 100%;
overflow: auto; }
似乎没有用。我必须指定span4和span8的高度,如“400px”,但我不想这样做(不负责任?,我也不知道高度)。我错过了什么吗?如果可以在没有JavaScript的情况下完成,那就很好(我对js知之甚少)。感谢。
更新:仍然无法弄明白。以下是一个说明http://jsfiddle.net/hPfKk/2/
的链接答案 0 :(得分:8)
我认为你想在行流体周围创建一个'包装器/盒子'。对于Bootstrap CSS和围绕2个跨度/列的position:absolute
容器进行一些覆盖,这应该可以工作..
<div class="box">
<div class="row-fluid">
<div class="column span4">
<!-- left-side --->
</div>
<div class="column span8">
<!-- right-side --->
</div>
</div>
</div>
添加一些Bootstrap CSS覆盖,并调整.box和.column容器..
html, body {
height: 100%;
}
.row-fluid {
height: 100%;
}
.column:before, .column:after {
content: "";
display: table;
}
.column:after {
clear: both;
}
.column {
height: 100%;
overflow: auto;
}
.box {
bottom: 0; /* increase for footer use */
left: 0;
position: absolute;
right: 0;
top: 40px;
}
.full {
width: 100%;
}
答案 1 :(得分:1)
将html设置为高度:100%。
html,body {
height: 100%;
overflow: hidden;
}
.span4 {
height: 100%;
overflow: auto;
}
.span8 {
height: 100%;
overflow: auto;
}
答案 2 :(得分:-1)
我找到了使用JavaScript解决此问题的方法:
$(document).ready(function() {
windowHeight = $(window).height();
$('.span4').height(windowHeight);
$('.span8').height(windowHeight);
});
在CSS中,span4或span8的高度不需要特定。 JS非常强大,下周我将开始学习它。