文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用引导带4创建独立的可滚动列？

问如何使用引导带4创建独立的可滚动列？
EN

Stack Overflow用户

提问于 2020-12-05 11:45:43

回答 2查看 1.5K关注 0票数 0

我试图在顶部得到一些固定高度的内容，下面有2列可以单独滚动。我想让他们占据任何屏幕高度，所以我不能使用固定的height或max-height。

我使用的是Bootstra4.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和在两个cases...nothing中的方法。没有滚动条。根本没有明显的区别。

很明显，我缺少一些基本的理解。

我没有被挠曲箱的解决方案挂断。其他一些CSS解决方案会很好，如果需要的话，甚至JS也可以。

方法1:顶部容器上的柔性箱

这样做的目的是使所有内容具有灵活性，但防止两个标题行收缩。我要用Bootstrap 4类来完成这一切，所以没有flex-basis。但这是默认情况下的automatic，这正是我想要的。我认为。

我是这么想的：

flex-grow-0 everywhere，因为我不希望任何东西在包含我的2列的行的前两个rows
flex-shrink-1上填充space
flex-shrink-0，在列

中的列上填充themselves

no 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:只在包含两列的行上使用柔性盒

也许所有东西上的柔性盒都太过分了，这就把事情搞砸了？让我们尽量集中精神。

d-flex在包含我的列的行中。这一次是flex-column.
I而不是flex-row不希望列在主轴上生长或收缩，所以它们现在是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>

multiple-columns

twitter-bootstrap

bootstrap-4

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-06 08:54:49

非常简单的解决方案。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;
}

这给了我页面中的两个独立的可滚动列，这个页面本身是可滚动的。他们不会失去任何可用的高度，头部材料，或当我添加页脚材料。

票数 1

Stack Overflow用户

发布于 2020-12-05 14:58:22

如果我理解你的问题，问题是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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65156546

复制

相似问题

问如何使用引导带4创建独立的可滚动列？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用引导带4创建独立的可滚动列？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用引导带4创建独立的可滚动列？
EN