html - CSS div 高度填充剩余空间并在达到屏幕最大高度时滚动

Question

我在网上到处搜索这个，但我找不到真正适合我甚至工作的人。我找到的答案很旧和/或不是我正在寻找的 100%，所以我希望是否有人可以帮助我。

我在我的应用程序中使用了 bootstrap 4，所以如果它可以用 bootstrap 完成，那么是的，但是纯 css 也可以。

我尝试做的是并排放置 4 个 div

例子:

<div class="row">
    <div class="col">
        <h1>Item 1</h1>
    </div>

    <div class="col">
        <h1>Item 2</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
</div>

这是因为 bootstrap 4，但现在我还希望 div 高度延伸到屏幕底部，如果该 div 的内容比屏幕高度长，那么它应该滚动(在 div 内)。

我在考虑 flex 盒子，但我无法让它工作。

Answer 1

由于您使用的是 bootsrap 4 ，因此 flex 已经包含在内。

如果想法是让行增长到视口(viewport)的 100% 高度，然后在子项中显示一个滚动条，该滚动条将增长到超过该值，您需要创建一个涉及最大高度和溢出的自定义类:

自定义类示例

<div class="row h100-scroll  ">

开始使用的选择器和规则

.h100-scroll .col {/* to scroll col individually*/
  max-height: 100vh;
  overflow: auto;
}

或

.h100-scroll  {/* to scroll the row itself */
  max-height: 100vh;
  overflow: auto;
}

---

下面的演示，在第一个列上运行代码段和悬停文本

.h100-scroll .col {
  max-height: 100vh;
  overflow: auto;
}

.col br {display:none;}
p:hover br {display:block;}
body {
  margin: 0 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />
<div class="row h100-scroll  ">
  <div class="col">
    <h1>Item 1</h1>
    <p>hover me show the br and add a scrollbar<br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . 
  </div>

  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
</div>