启用两个带引导程序的滚动条

时间:2013-05-04 01:32:52

标签: css twitter-bootstrap

我刚开始学习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/

的链接

3 个答案:

答案 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%;
}

演示:http://bootply.com/60614

答案 1 :(得分:1)

将html设置为高度:100%。

html,body { 
       height: 100%; 
       overflow: hidden; 
} 

.span4 {
        height: 100%;
        overflow: auto; 
}
.span8 { 
        height: 100%;
        overflow: auto; 
}

http://jsfiddle.net/VerCp/

答案 2 :(得分:-1)

我找到了使用JavaScript解决此问题的方法:

 $(document).ready(function() {
      windowHeight = $(window).height();
      $('.span4').height(windowHeight);
      $('.span8').height(windowHeight);
  });

在CSS中,span4或span8的高度不需要特定。 JS非常强大,下周我将开始学习它。