Bootstrap 4 我们如何在Bootstrap 4中创建一个可滚动的列，内容保持在视口中？_Bootstrap 4

Bootstrap 4 我们如何在Bootstrap 4中创建一个可滚动的列，内容保持在视口中？

bootstrap-4

Bootstrap 4 我们如何在Bootstrap 4中创建一个可滚动的列，内容保持在视口中？,bootstrap-4,Bootstrap 4,我想要的是一个两窗格的演示文稿，左侧是项目列表，右侧是内容列表。整个页面高度应填充视口。不过，列表中的内容将超过视口中的容量，因此它应该垂直滚动显示我想要的。。。除了它的高度固定在800px，而我希望它填充视口。我在那里的基本结构是： <body class="d-flex" style="padding: 4px;"> <div class="container-fluid"> <div class="row">

我想要的是一个两窗格的演示文稿，左侧是项目列表，右侧是内容列表。整个页面高度应填充视口。不过，列表中的内容将超过视口中的容量，因此它应该垂直滚动

显示我想要的。。。除了它的高度固定在

800px

，而我希望它填充视口。我在那里的基本结构是：

<body class="d-flex" style="padding: 4px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3" style="height: 800px; overflow-y: scroll;">
                <nav class="nav nav-pills flex-column">
// whole lotta <a> tags
                </nav>
            </div>
            <div class="col-sm-9">
                <iframe id="klassbook" width="100%" height="100%" class="embed-responsive-item" src="/lessons/Hello World/function.html"></iframe>
            </div>
        </div>
    </div>

// script stuff

</body>


//整个乐透是相同的内容，除了我开关高度：800px至高度：100%。这使整个页面可以滚动，从而使
扩展到视口底部
是相同的内容，除了我移动高度：100%到行
。它给我的视觉效果和前面的一样
这种双窗格用户界面的配方是什么，右侧填充可用空间，左侧滚动？
将其添加到左侧div

overflow-y: scroll; 
max-height: 100vh; 
display: list-item; 

你在台式机和移动设备上也需要这个？？？@mrPerfectist：我在本页中关注的是台式机和大型平板电脑，而不是手机。overflow-y:scroll；最大高度：100vh；显示：列表项；哦。。。那太有用了！这给了我很多。你是想写下来作为回答，还是我应该写？谢谢给出答案。。。。