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

【问题标题】：How can I create independently scrollable columns with Bootstrap 4?如何使用 Bootstrap 4 创建可独立滚动的列？
【发布时间】：2021-03-17 06:33:12
【问题描述】：

我试图在顶部获取一些固定高度的内容，下面有 2 列可单独滚动。我希望他们占用任何可用的屏幕高度，所以我不能使用固定的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。

方式一：顶层容器上的flexbox

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

这是我的想法：

flex-grow-0 到处都是，因为我不想让任何东西长出来填满空间
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>

方式2：flexbox仅在包含两列的行上

也许所有东西上的 flexbox 都太过分了，这把事情搞砸了？让我们更加专注。

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

现在我希望我的滚动条位于横轴上。 align-stretch 会在横轴上拉伸它们，但是没有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>

【问题讨论】：

您希望整个页面不超过视口高度？您不希望顶部的标题滚动到视图之外？
我很高兴标题在某些情况下会滚动到视图之外。关键部分是左右列独立滚动。一个 JS 事件最终应该将另一个元素滚动到视图中。

标签： twitter-bootstrap bootstrap-4 flexbox multiple-columns

【解决方案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

【讨论】：

这看起来很有希望。有机会我会去看看。谢谢齐姆。
这太棒了。谢谢你。那里有一些关于管理高度和溢出的课程，这也正是我所希望的。玩过之后，我意识到我假设页面本身仍然是可滚动的。迟早我会有一些页脚内容。就目前的解决方案而言，页脚将在列的底部吃掉。是否可以滚动页面和列？还是有点幻想？
我已经解决了。我将在下面发布。没有你的帮助就无法到达那里@Zim - 谢谢！

【解决方案2】：

非常简单的解决方案。 Flexbox 是不必要的。这些列需要一些我认为不能作为 Bootstrap 实用程序类提供的 CSS，因此它涉及少量的自定义 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;
}

这为我提供了一个页面中两个独立的可滚动列，该页面本身就是可滚动的。它们不会丢失页眉材料或添加页脚材料时的任何可用高度。

【讨论】：