Bootstrap4 - 2列：左侧滚动，右侧固定地图

Question

使用Bootstrap4创建两列布局，左列应滚动（当前不是），右列不应滚动（当前它的位置如图中的滚动条所示）。地图应该始终是窗口的高度（我认为在＆＃34;视口＆＃34;在Bootstrap中）。仅供参考，随着服务器将更多主机推入其中，左列的内容随着时间的推移而增长：

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秒向侧边栏添加一个新段落，所以如果等待的时间足够长，您会看到侧边栏的滚动条变为活动/可滚动。

有了这个，只要你将地图部分限制为永远不会大于视口，你就不会看到该页面的滚动条。

Answer 2

我使用了这个CSS，它对我有用：

CSS：

#map {
    margin-left:20%;
    position:fixed;
}

这将允许左列col-md-2可滚动并阻止右列col-md-10滚动。通过添加margin-left:20%;，右列不会与左侧的内容重叠。