使用 bootstrap 且无绝对位置的独立可滚动列

Question

几个小时以来，我一直在阅读类似的问题和答案，但无法在我非常简单的示例中使用它：

<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/

我正在使用 bootstrap。我有一个横跨整个宽度的 header (#top-container)。接下来的两列宽度相等，页脚应始终位于页面底部。 我需要两列具有仅在 header 和页脚之间滚动的垂直滚动条。

我尽量避免使用 position: absolute，如果这是唯一可行的解​​决方案，请给我一个示例。

很可能我遗漏了一些小东西，但看不到它。 非常感谢任何帮助。

Answer 1

试试这个：http://jsfiddle.net/vgxvpjdv/1/

每列：

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

这会将它固定在 header 下方，然后允许它滚动。按页脚高​​度减小高度以查看页脚。

更新：http://jsfiddle.net/vgxvpjdv/2/

已将 left: 0; 添加到左栏。右栏遮住了滚动条。