css - Bootstrap4 - 2 列 : left scroll, 右固定图

Question

使用 Bootstrap4 创建两列布局，左列应该滚动(目前没有)，右列不应该滚动(目前它可以滚动，如图中的滚动条所示)。 map 应该始终是窗口的高度(我认为在 Bootstrap 中称为“视口(viewport)”)。仅供引用，随着服务器将更多主机插入其中，左列的内容会随着时间增长:

HTML:

<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">list of hosts (should scroll)</div>
            <div class="col-md-10" id="map">google map (should NOT scroll)</div>
        </div>
    </div>
</div>

CSS:

.col-md-2 {
    border-right: 1px solid black;
    min-height: 100vh;
    overflow-y: scroll;
    padding: 0;
}

谢谢

Answer 1

这是一个使用固定边栏的示例:https://jsfiddle.net/Lbn21js8/1/

我在边栏中添加了一个 id 选择器和一个背景颜色:

<div id="app">
  <div class="container-fluid">
    <div class="row">
      <div id="sidebar" class="col-md-2 bg-light ">list of hosts (should scroll)</div>
      <div class="col-md-10 ml-auto" id="map">google map (should NOT scroll)</div>
    </div>
  </div>
</div>

使用这个 CSS:

#sidebar {
  border-right: 1px solid black;
  overflow-y: scroll;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}

链接的 jsFiddle 每 1.5 秒向侧边栏添加一个新段落，因此如果您等待足够长的时间，您将看到侧边栏的滚动条变为事件/可滚动状态。

有了这个，只要您将 map 部分限制为永远不会大于视口(viewport)，您就不会看到页面的滚动条。