Question

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

This page显示了我想要的...，但是它的高度固定为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>

This page的内容相同，只不过我将左侧height: 800px;的{{1}}切换为<div>。这样整个页面都可以滚动，导致height: 100%;扩展到视口的底部。

This page是相同的内容，只不过我将<iframe>移到了height: 100%;行。它给了我与上一个相同的视觉效果。

这种两窗格式UI的配方是什么，其中右侧填充了可用空间，左侧滚动了？

Answer 1

将此添加到您的左侧div

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

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

1 个答案: