如何使 bootstrap 网格中的 div 可滚动，同时保持页面不滚动

Question

我正在使用 Bootstrap 构建网络应用程序 4. 页面本身永远不应该滚动。如果内容太大，子面板应该滚动。

这就是我想要的：但是这个演示使用的是 jQuery 而我根本不想在项目中使用 jQuery 。我想用 CSS (flexbox?)

来做到这一点

如果我注释掉 jQuery，div 会延伸到应用程序区域下方并导致页面滚动，这是我不希望的：

我试过将这个添加到红色 div:

max-height: calc(100% - 20px);
overflow-y: auto;

但是百分比不起作用。 max-height: calc(210px - 20px); 之类的东西确实有效，但是当你调整 window 的大小时，它就坏了。

是否有一种简单的（或复杂的，如果需要的话）方法可以用 CSS 完成此任务？

https://codepen.io/jimjb/pen/wvowZOa

Answer 1

我认为您可能需要 overflow:scroll 并且其中一个祖先元素需要具有最大高度才能工作的高度。这是一个编码示例：

.main_container {
  width: 100%;
  /* height is 100% viewport height */
  height: 100vh;
  /* Hide overflow here to prevent scrolling */
  overflow: hidden;
  display: flex;
  background:#efefef;
}


/* set the container to scroll */

.notes_scroll {
  height: 100%;
  width:100%;
  padding: 25px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}


/* hide scrollbar */

.notes_scroll::-webkit-scrollbar {
  display: none;
}

.sec {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  max-width: 30%;
  background: #dadada;
}

.right {
  flex-wrap: wrap;
}

.top {
  height: 50%;
  width: 100%;
}

.notes {
  max-width: 50%;
  height: 50%;
  background: #fff;
}

.bottom_right {
  max-width: 50%;
  height: 50%;
  background: #ccc;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="main_container">
  <div class="sec left">Left</div>
  <div class="sec right">
    <div class="sec top">Top</div>
    <div class="sec notes">
      <div class="notes_scroll">
        <h2>Notes</h2>
        <div class="notes_content">
          Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/> Many notes...<br/>          Many notes...
        </div>
      </div>
    </div>
    <div class="sec bottom_right">Bottom Right</div>
  </div>
</div>

Answer 2

感谢@return_false 让我走上了正确的道路。 @return_false 的回答没有 Bootstrap ，它在 post 的标题和第一句中。我想显示一个在 css 中具有最低限度的答案（使用 Bootstrap 类有帮助）。如原始 Codepen 中所示，我还希望注释 div 滚动，但标签 而不是 滚动（我可以从我的描述中看出这一点 if 你没有参考代码笔）。

我认为对我来说主要的收获是每个容器都有一个高度很重要，包括主容器；这似乎是关键。

.main_container {
  height: 100vh; /* 100% viewport height */
  overflow: hidden; /* hide overflow to prevent scrolling */
}

.notes_scroll {
  height: calc(100% - 25px); /* subtract the 'Notes' label height */
  overflow-y: auto;
}

div{
  border: 1px solid #AAA;
}

.problem-div{
  background-color: #FBB;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="grid">
  <div class="main_container">
    <div class="row h-100">
      <div class="col-sm-4">left</div>
      <div class="col-sm-8">
        <div class="row h-50">
          top
        </div>
        <div class="row h-50">
          
          <div class="col-sm-6 h-100">
            <div class="row">
              Notes
            </div>
            <div class="row problem-div notes_scroll">
              Many notes 1<br>Many notes 2<br>
              Many notes 3<br>Many notes 4<br>
              Many notes 5<br>Many notes 6<br>
              Many notes 7<br>Many notes 8
            </div>
          </div> 
          <div class="col-sm-6">bottom right</div>
        </div>
      </div>
    </div>
    
  </div>
</section>

https://codepen.io/jimjb/pen/XWNWPbX

如何使 bootstrap 网格中的 div 可滚动，同时保持页面不滚动

How to make div in bootstrap grid scrollable while keeping page non-scrolling

css

scroll

flexbox

bootstrap-4