使用引导程序启用两个滚动条 [英] Enable two scroll bars with bootstrap

问题描述

我刚开始学习 CSS，我想要一个包含两个独立列的页面，每个列都有一个滚动条.而我的 CSS 就像(span4 和 span8 是 div 类)

body {高度:100%；溢出:隐藏；}.span4 {高度:100%；溢出:自动；}.span8 {高度:100%；溢出:自动；}

好像不行.我必须指定span4和span8的高度，比如400px"，但我不想这样做(不负责?，我也不知道高度).我错过了什么吗?如果这可以在没有 JavaScript 的情况下完成，那就太好了(我对 js 知之甚少).谢谢.

更新:还是想不通.这是一个说明的链接:http://jsfiddle.net/hPfKk/2/

解决方案

我认为您想围绕行流体创建一个包装器/盒子".对 Bootstrap CSS 进行一些覆盖，并在 2 个跨度/列周围使用 position:absolute 容器，这应该可以工作..

<div class="row-fluid"><div class="column span4"><!-- 左侧 --->
<div class="column span8"><!-- 右侧 --->

添加一些 Bootstrap CSS 覆盖，并调整 .box 和 .column 容器..

html, body {高度:100%；}.row-fluid {高度:100%；}.column:before, .column:after {内容: "";显示:表；}.列:在{之后清楚:两者；}.柱子 {高度:100%；溢出:自动；}.盒子 {底部:0；/* 增加页脚使用 */左:0；位置:绝对；右:0；顶部:40px；}.满的 {宽度:100%；}

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

I just started to learn CSS and I want a page with two independent columns, each has a scroll bar. And my CSS is like (span4 and span8 are div class)

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

It seems not working. I have to specify the height of span4 and span8, like "400px", but I don't want to do this (not responsible?, also I don't know the height). Do I miss something? If this can be done without JavaScript, that'll be good (I know little of js). Thanks.

Update: still can't figure it out. Here is a link to illustrate: http://jsfiddle.net/hPfKk/2/

解决方案

I think you want to create a 'wrapper/box' around the row-fluid. With a few overrides to the Bootstrap CSS and a position:absolute container around the 2 spans/columns this should work..

<div class="box">
  <div class="row-fluid">
    <div class="column span4">

     <!-- left-side --->

    </div>
    <div class="column span8">

     <!-- right-side --->

    </div>
  </div>
</div>

Add some Bootstrap CSS overrides, and tweak the .box and .column containers..

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

Demo: http://bootply.com/60614

这篇关于使用引导程序启用两个滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！