如何在右下角 div 中获得滚动条

Question

我正在尝试布局具有三个原因的网页 - 左、右上和右下。左右区域应该有滚动条，整个页面应该填满屏幕。我正在使用 Bootstrap 4。

我可以让滚动条在左侧区域正常工作。问题出在右侧区域 - 水平滚动条出现在右下角区域，它应该出现，但垂直滚动条出现在整个页面上。请注意，右下角也有一个垂直滚动条，但它被禁用了。

#outer {
  height: 100vh;
  overflow: none;
}

#left-col {
  height: 100vh;
  overflow: scroll;
  background-color: #ff85d4;
}

#left-large {
  height: 5000px;
  width: 5000px;
}

#right-col {
  height: 100vh;
}

#right-top {
  background-color: #abff64;
}

#right-bottom {
  overflow: scroll;
  background-color: #ccddff;
}

#right-bottom-inner {
  width: 2000px;
  height: 2000px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row" id="outer">
    <div class="col-9" id="left-col">
      <div id="left-large">
        Large left
      </div>
    </div>
    <div class="col-3" id="right-col">
      <div id="right-top">
        <p>
          Top 1
        </p>
        <p>
          Top 2
        </p>
        <p>
          Top 3
        </p>
      </div>
      <div id="right-bottom">
        <div id="right-bottom-inner">
          Right bottom inner
        </div>
      </div>
    </div>
  </div>
</div>

如何让右下区域有自己的滚动条？

Answer 1

就像我在 cmets 中所说的，这是使用 CSS 网格的另一种方法，这似乎是处理这种...“网格”的完美工具 :)

我给了所有的框足够的空间你可以滚动...随意调整。

更新：我制作了 right-top 框 max-content 并随着内容的增长而增长，同时将 right-bottom 框的最小高度设置为 20px。

body {
    padding: 0;
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template-columns: 1.6fr 0.4fr;
    grid-template-rows: max-content minmax(20px, 1fr);
    gap: 1rem;
    height: 100vh;
    width: 100vw;
}

.wrapper-inner {
    height: 2000px;
    width: 2000px;
}

.left,
.right-top,
.right-bottom {
    overflow: auto;
    padding: 1rem;
}

.left {
    grid-row-start: 1;
    grid-row-end: 3;
    background: hotpink;
}

.right-top {
    background: lime;
}

.right-bottom {
    background: skyblue;    
}

<div class="wrapper">
  <div class="left">
    <div class="wrapper-inner">
        Large left
    </div>
  </div>
    <div class="right-top">
        <p>
            Top 1
        </p>
        <p>
            Top 2
        </p>
        <p>
            Top 3
        </p>
    </div>
    <div class="right-bottom">
        <div class="wrapper-inner">
            Right bottom inner
        </div>
    </div>
</div>

Answer 2

如果你想在任何块元素上强制滚动条，你需要设置一个固定的高度，并包括一个overflow-x:scroll 或overflow-y:scroll 属性，具体取决于你希望滚动条出现的位置。

如果你想要水平滚动条，使用overflow-x:scroll;，如果你想要垂直滚动条，使用overflow-y:scroll;

Answer 3

弹性很神奇
CSS

/*Allow children to auto fixed height*/
#right-col {
    display: flex;
    flex-direction: column;
}

#right-top {
  height: fit-content; /*Only use essential*/
}

#right-bottom {
  overflow: scroll; /*See child content*/
  height:100%; /*use all remain height*/
}

Answer 4

看到高度需要明确（百分比或固定数字），我找不到纯 CSS 的解决方案。

相反，我使用ResizeObserver 来跟踪right-col 和right-top 元素大小的变化（在我的实际问题中，右上元素的大小变化），计算右下元素（@ 987654325@ 基本上），并将其作为动态style 应用于right-bottom 元素。

不漂亮，但它正在工作。

我也尝试使用 CSS 网格（而不是完全使用引导程序），但没有明确指定右下元素的高度，滚动条也在那里表现不正常。