css - 使用引导程序启用两个滚动条

Question

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

Answer 1

我认为您想在行流体周围创建一个“包装器/盒子”。通过对 Bootstrap CSS 和position:absolute2 个跨度/列周围的容器进行一些覆盖，这应该可以工作..

<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

Answer 2

也将 html 设置为 height:100%。

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

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

http://jsfiddle.net/VerCp/

Answer 3

我找到了使用 JavaScript 解决这个问题的方法：

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

而在 CSS 中，span4 或 span8 的高度无需具体说明。JS真的很强大，下周开始学习。