CODEWITHSUNDEEP
htmlcsstwitter-bootstrapscroll
Paul Meems
Paul Meems

Reputation: 3294

Independent scrollable columns using bootstrap and no absolute position

I've been reading similar questions and answers for hours but can't get it to work in my very simple example: 

<section id="top-container" class="container-fluid">
    <div class="row-fluid">
        <article class="col-md-12 col-xs-12">
            <h1>My header</h1>
            <p>
                Some text
            </p>
        </article>
    </div>
</section>
<section id="main-container" class="container-fluid">
    <article id="column1" class="col-xs-6 col-md-6">
        <h1>Column #1</h1>
        <p>Salami tri-tip filet mignon beef ground round, turducken swine shoulder pork belly bresaola chuck short loin meatloaf landjaeger. Venison filet mignon tongue, shank beef ribs rump jowl pork short ribs turducken. Chuck boudin strip steak jowl biltong filet mignon swine flank shank beef hamburger short ribs kielbasa. Turkey bresaola tail t-bone. Andouille ground round pastrami prosciutto fatback t-bone pork loin bacon alcatra chicken frankfurter biltong short loin. Tongue strip steak shoulder picanha andouille shankle.</p>
        <p>Alcatra bresaola sirloin capicola spare ribs leberkas ham hock tongue tenderloin porchetta picanha strip steak doner andouille hamburger. Prosciutto cow jerky ham hock tongue kevin ribeye. Bacon meatloaf pastrami, strip steak meatball picanha pork belly ribeye fatback flank jowl. Short ribs rump capicola filet mignon, short loin ball tip pork belly ribeye.</p>
        <p>Cupim cow andouille sirloin venison doner brisket tail pancetta. Leberkas prosciutto ham hock cow turducken shoulder. Leberkas ham hock pastrami kevin pancetta tri-tip flank spare ribs picanha shank. Chicken pork belly pork chop ball tip beef kielbasa andouille ribeye meatloaf, prosciutto flank alcatra pig. Landjaeger pig rump alcatra cow, shankle andouille chuck tail leberkas.</p>
    </article>
    <article id="column2" class="col-xs-6 col-md-6">
        <h1>Column #2</h1>
        <p>Bacon ipsum dolor amet beef ribs sirloin capicola tenderloin porchetta, salami tongue swine doner. Fatback beef chuck meatloaf. Ground round frankfurter pancetta chuck tenderloin drumstick. Shank frankfurter spare ribs pork belly, prosciutto bacon biltong alcatra sirloin short loin salami. Beef tenderloin pork belly ham hock kevin bresaola t-bone biltong tri-tip shoulder landjaeger spare ribs andouille turducken bacon. Beef fatback salami pastrami turducken t-bone, drumstick andouille shankle meatball strip steak ham.</p>
        <p>Tongue sirloin kevin, pork chop spare ribs bacon ball tip pork loin sausage fatback hamburger. Prosciutto porchetta alcatra ham cow chicken cupim chuck shoulder tongue. Fatback brisket ball tip bacon pork cupim salami meatloaf ribeye. Pork loin fatback bresaola cow sirloin, tongue rump. Pig sausage tri-tip turducken flank chicken pancetta. Capicola sausage bacon beef ribs. Shoulder ham hock ball tip tail.</p>
        <p>Kielbasa bacon biltong turducken venison bresaola. Ham t-bone kevin, ham hock chicken porchetta ball tip pork venison boudin frankfurter. Bresaola turducken pig tri-tip kielbasa porchetta, pork chop flank ground round jowl. Bresaola pancetta chicken venison prosciutto. Brisket pancetta jerky, corned beef t-bone shank bacon salami. Flank brisket pastrami, tenderloin pig t-bone tail pork belly meatloaf ham frankfurter sirloin fatback. Sausage cupim leberkas alcatra t-bone capicola kielbasa pork loin swine shank ground round tri-tip.</p>
    </article>
</section>

<footer class="row-fluid">
    <div>
        <button class="btn btn-primary btn-sm">Next <span class="glyphicon glyphicon-chevron-right"></span></button>
    </div>
</footer>

http://jsfiddle.net/vgxvpjdv/

I'm using bootstrap. I have a header (#top-container) which spans the whole width. Next two columns with equal widths and a footer which should always be at the bottom of the page. I need the two columns to have vertical scroll bars that only scroll between the header and the footer.

I'm trying to avoid using position: absolute, if that is the only working solution please give me a sample.

Most likely I'm missing something small, but can't see it. Any help is much appreciated.

Upvotes: 1

Views: 916

Answers (1)

JBux
JBux

Reputation: 1404

try this: http://jsfiddle.net/vgxvpjdv/1/

Each Column:

height: calc(100% - 100px);
position:fixed;
top:100px;
overflow: scroll;

This will fix it below the header, then allow it to scroll. Reduce height by footer height to see footer also.

Updated: http://jsfiddle.net/vgxvpjdv/2/

Added left: 0; to the left column. The right column was covering its scroll bar.

Upvotes: 3

Related Questions