CSS div高度填充剩余空间并滚动达到屏幕的最大高度答案

【问题标题】：CSS div height fill remaing space and scroll if reach max height of screenCSS div高度填充剩余空间并滚动达到屏幕的最大高度
【发布时间】：2017-11-19 22:16:57
【问题描述】：

我已经在网上到处搜索了这个，但我找不到真正适合我甚至工作的人。我找到的答案非常古老和/或不是 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 内）。

我正在考虑使用弹性盒子，但我无法让它发挥作用。

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

由于您使用 bootsrap 4，flex 已经参与其中。

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

自定义类示例

<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;
}

下面的演示，运行 sn-p 并将文本悬停在第一列

.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>

【讨论】：

max-height: 100vh; 这就是秘诀。
这有点适合我，我确实有一个标题，所以 vh 对我来说是 80。.col 也使用了一些边距和一些填充，当我最小化我的浏览器时（所以高度更小） div 将在屏幕视图下延伸。这是因为我在那个 .col 上使用了填充和边距吗？如果是这样，什么是好的解决方案？
例如，你看到的第一张图片是黑条，那就是我的 windows 条，这很好。 2e 图像我在浏览器中打开了我的控制台，但它变得很糟糕。图片好：gyazo.com/a6b8e96c8500b07d2ac86bdd092a387c 图片不好：gyazo.com/dce3e3de3782d9592250c19922884ec6
@NielsLucas ，如果边距和页眉的高度已知，那么我们可以使用 calc() 来设置最大高度。如果您的 html 结构由 1 个容器包装标题和行组成，也可以解决。您是否有显示您的问题的结构示例？
我解决了。在我想要滚动的 div 上，我使用：max-height: calc(100vh - 200px);

【解决方案2】：

您可能想在 jQuery 中执行此操作。解释：

如果 div 的高度大于文档的高度，则在 div 中显示滚动

代码：

$(document).ready(fuction(){

var docHeight = $(document).height();

var divHeight = $('.the-four-divs').height();
If(divHeight > docHeight){
$('.the-four-divs').css('overflow-x', 'scroll');

}

});

`

希望对你有帮助。

【讨论】：

这似乎与原始答案无关（尤其是.the-four-divs）。使用 sn-p 工具提供一个工作代码示例怎么样？
如果 jQuery 甚至不需要它，为什么要使用它......现在你可以简单地使用 css。我用公认的答案解决了这个问题。也许这也是你要学习的东西:)
谢谢！我更喜欢 jQuery

【解决方案3】：

您可以将列设置为'height: 100%' 或'height: 100vh' 并设置'overflow: scroll;'。

    <!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        html, body {
            height: 100%;
            margin:0;
        }
        .row {
            width: 100%;
        }
        .col {
            display: inline-block;
            box-sizing: border-box;
            width: 25%;
            margin: 0;
            height: 100%;
            overflow: auto;
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col">
        <h1>Item 1</h1>
    </div><div class="col">
        <h1>Item 2</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div><div class="col">
        <h1>Item 2</h1>
    </div><div class="col">
        <h1>Item 2</h1>
    </div>
</div>
</body>
</html>

【讨论】：

【解决方案4】：

您需要将元素的height 设置为100%。如果父级不是屏幕的 100%，那么您还需要设置父级高度。如果您的 HTML 结构如下所示...

<html>
<body>
  <div class="row">
      <div class="col"></div>
  </div>
</body>
</html>

...那么您需要将所有这些中的height 设置为100%：

html, body, div.row, div.col {
    height:100%;
}

要创建滚动条，可以设置溢出来滚动：

.col {
    overflow:scroll;
}

【讨论】：