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。我有一个横跨整个宽度的标题（#top-container）。接下来两列宽度相等，页脚始终位于页面底部。我需要两列才能有垂直滚动条，只能在页眉和页脚之间滚动。

我试图避免使用position：absolute，如果这是唯一可行的解决方案，请给我一个样本。

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

Answer 1

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

每一栏：

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

这会将其固定在标题下方，然后允许它滚动。通过页脚高度降低高度也可以看到页脚。

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

在左栏添加了left: 0;。右栏覆盖了滚动条。

使用bootstrap的独立可滚动列，没有绝对位置

1 个答案: