CODEWITHSUNDEEP
csstwitter-bootstrapscrolloverflow
Micaiah Wallace
Micaiah Wallace

Reputation: 1146

Bootstrap 2 columns one needs to scroll while other fixed position

So I have a very specific design that involves 2 columns inside of a box.

The left column will stay within the height bounds of the box but the right column will be longer and thus require scrolling. I am using bootstrap and need to get the right column to scroll without the left one moving.

I've already tried making the box overflow:scroll but obviously that scrolls both columns. Any ideas?

Here's the code:

html:

<div class="fluid-container">
    <div class="row">
        <div class="col-xs-12 outer">
            <div class="row">
                <div class="col-xs-4 leftcol">
                    This content needs to stay put while scrolling (aka fixed)
                </div>
                <div class="col-xs-8 rightcol">
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                </div>
            </div>
        </div>
    </div>
</div>

css:

.outer {
    border:solid 1px #000;
    height:200px;
    overflow:hidden;
}

.leftcol {
    border:solid 1px green;
}

.rightcol {
    border:solid 1px red;
    overflow:scroll;
    height:200px; /* I WANT THIS TO BE IMPLIED RATHER THAN STATIC */
}

http://jsfiddle.net/snoapps/z8h0drsb/

Upvotes: 4

Views: 7283

Answers (1)

Peter Girnus
Peter Girnus

Reputation: 2729

I took out the overflow hidden on the wrapper but gave .rightcol a height and then applied overflow-y: scroll to it.

CSS:

.outer {
    border:solid 1px #000;
    height:200px;
}

.leftcol {
  /* position: fixed;
   top: 0%;
   left: 0%; */
   border:solid 1px green;
   overflow:hidden;
}

.rightcol {
   /* border:solid 1px red;
   position: relative;
   top: 0%;
   left: 50%;  */
   border:solid 1px red; 
   overflow-y: scroll;
   height: 200px;
}

Left is fixed, right scrolls off the screen.

CODEPEN DEMO

I hope I understood you correctly, if not just comment and I'll update!

Upvotes: 5

Related Questions