如何使用 Bootstrap 4 创建可独立滚动的列？

Question

我试图在顶部获取一些 fixed-height 内容，下面有 2 列可以单独滚动。我希望他们占用可用的任何 screen-height，所以我不能使用固定的 height 或 max-height.

我使用的是 Bootstrap 4.5，所以我的标记如下：

<body>

    <div class="container">

        <div class="row">
            <div class="col-12">
                <h1>h1</h1>
                ...main nav...
            </div>
        </div>

        <div class="row">
            <div class="col-7">
                ...crumbtrail...
            </div>
        </div>

        <div class="row">
            <div id="col-left" class="col-7">
                ...left-content...
            </div>

            <div id="col-right" class="col-5">
                ...right-content...
            </div>
        </div>

    </div>

</body>

我想独立滚动的是 col-left 和 col-right 这两列。我用 flexbox 尝试了两种方法，在这两种情况下……都没有。没有滚动条。完全没有明显差异。

显然我在这里缺少一些基本的理解。

我对 flexbox 解决方案不感兴趣。其他一些 CSS 解决方案就可以了，必要时甚至可以使用 JS。

方式 1：top-level 容器上的 flexbox

想法是让所有的内容都灵活，但要防止 header 两行收缩。我将用 Bootstrap 4 类来完成这一切，所以没有 flex-basis。但这就是 automatic 默认情况下，这就是我想要的。我觉得。

这是我的想法：

flex-grow-0到处都是，因为我不想让任何东西长出来填满space
flex-shrink-0 前两行
flex-shrink-1 在包含我的 2 列的行上，在列本身上
没有 flex css 或类实际上在列中的任何东西

正如我上面所说，没有任何反应。

<body>

    <div class="container d-flex flex-column">

        <div class="row flex-grow-0 flex-shrink-0">
            <div class="col-12">
                <h1>h1</h1>
                ...main nav...
            </div>
        </div>

        <div class="row flex-grow-0 flex-shrink-0">
            <div class="col-7">
                ...crumbtrail...
            </div>
        </div>

        <div id="col-left" class="row flex-grow-0 flex-shrink-1">
            <div id="col-left" class="col-7 flex-grow-0 flex-shrink-1">
                ...left-content...
            </div>

            <div id="col-right" class="col-5 flex-grow-0 flex-shrink-1">
                ...right-content...
            </div>
        </div>

    </div>

</body>

方式二：仅在包含两列的行上使用 flexbox

也许所有东西上的 flexbox 都是矫枉过正，把事情搞砸了？让我们更加专注。

d-flex 在包含我的专栏的行上。这次是 flex-row 而不是 flex-column.
我不希望列在主轴上增大或缩小，所以它们现在 flex-grow-0 flex-shrink-0

现在我想要 cross-axis 上的滚动条。 align-stretch 会在 cross-axis 上拉伸它们，但是没有 align-shrink?

这就是我卡住的地方。

<body>

    <div class="container">

        <div class="row">
            <div class="col-12">
                <h1>h1</h1>
                ...main nav...
            </div>
        </div>

        <div class="row">
            <div class="col-7">
                ...crumbtrail...
            </div>
        </div>

        <div class="row d-flex flex-row">
            <div id="col-left" class="col-7 flex-grow-0 flex-shrink-0">
                ...left-content...
            </div>

            <div id="col-right" class="col-5 flex-grow-0 flex-shrink-0">
                ...right-content...
            </div>
        </div>

    </div>

</body>

Answer 1

如果我理解你的问题，问题是 height 和 overflow...

<div class="container d-flex flex-column vh-100 mh-100 overflow-hidden">
    <div class="row flex-shrink-1">
        <div class="col-12">
            <h1>h1</h1> ...main nav...
        </div>
    </div>
    <div class="row flex-shrink-1">
        <div class="col-7"> ...crumbtrail... </div>
    </div>
    <div class="row flex-grow-1 overflow-hidden">
        <div id="col-left" class="col-7 mh-100 overflow-auto"> 
          ...left-content...
        </div>
        <div id="col-right" class="col-5 mh-100 overflow-auto">
          ...right-content...
        </div>
    </div>
</div>

https://codeply.com/p/B3qD9n4Vyy

Answer 2

非常简单的解决方案。 Flexbox 是不必要的。这些列需要一些 CSS，我认为它们不能用作 Bootstrap 实用程序 class，因此它涉及少量自定义 CSS.

标记：

<body>
    <div class="container">

        <div class="row">
            <div class="col-12">
                ...main nav...
            </div>
        </div>

    <div class="row">
        <div class="col-7">
                ...crumbtrail...
        </div>
    </div>

    <div class="row">
        <div id="col-left" class="col-7">
                ...left-content...
        </div>

        <div id="col-right" class="col-5">
                ...right-content...
        </div>
    </div>

    </div>
</body>

CSS:

div#col-left, div#col-right {
    max-height: 100vh;          /* not available in Bootstrap */
    overflow-y: scroll;
}

这为我提供了一个本身可滚动的页面中的两个独立可滚动列。它们不会丢失任何可用高度到页眉 material 或当我添加页脚 material.

如何使用 Bootstrap 4 创建可独立滚动的列？

How can I create independently scrollable columns with Bootstrap 4?

multiple-columns

flexbox

twitter-bootstrap

bootstrap-4

方式 1：top-level 容器上的 flexbox

方式二：仅在包含两列的行上使用 flexbox