CODEWITHSUNDEEP
csstwitter-bootstrap
melodrama
melodrama

Reputation: 265

Enable two scroll bars with bootstrap

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/

Upvotes: 3

Views: 5893

Answers (3)

melodrama
melodrama

Reputation: 265

I find my way to solve this using JavaScript:

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

And in the CSS, heights of span4 or span8 are no need to specific. JS is really powerful and I'll start to learn it next week.

Upvotes: -1

Carol Skelly
Carol Skelly

Reputation: 362430

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

Upvotes: 8

queimadus
queimadus

Reputation: 81

Set the html as height:100% as well.

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

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

http://jsfiddle.net/VerCp/

Upvotes: 1

Related Questions