在 Bootstrap 网站上将 <div>-height 调整为 window-height

【问题标题】：Adjust <div>-height to window-height on Bootstrap website在 Bootstrap 网站上将 <div>-height 调整为 window-height
【发布时间】：2021-03-05 14:07:54
【问题描述】：

假设我有一个使用 Bootstrap 4 制作的简单网站，其中包含页眉、导航栏、内容区域和页脚。
我的演示网站可以在 JSFiddle 上找到并实时编辑：https://jsfiddle.net/26zda5xv/2/
请在下面找到该网站的屏幕截图：

我希望<div class="container"> 至少填写整个页面/窗口高度。 (min-height?)
这应该通过扩展<div id="content"> 的高度来完成。

当然，该解决方案应该自动处理各种屏幕分辨率/设备。

如何根据 JSFiddle 正确执行此操作？
Bootstrap 4 中是否有针对此任务的内置解决方案？

谢谢！

【问题讨论】：

标签： javascript css twitter-bootstrap bootstrap-4

【解决方案1】：

要解决这个问题，我们需要 2 个步骤：

将d-flex flex-column min-vh-100 类添加到容器中。
在内容 div 中添加 flex-grow-1 类

see this fiddle

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<body class="bg-secondary">

  <div class="container bg-white shadow border border-dark d-flex flex-column min-vh-100">

    <img src="http://www.apexcartage.com/wp-content/uploads/2014/05/placeholder-blue.png" class="img-fluid" alt="Responsive image">

    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
    </nav>

    <div id="content" class="my-3 flex-grow-1">
      <p class="h3">Content</p>
    </div>

    <footer>

      <div class="bg-dark text-white mt-4 p-3 border-info" style="border-top: 4px solid">
        <h5 class="title">Footer</h5>
      </div>
      <div class="bg-info p-1"></div>

    </footer>

  </div>

</body>

【讨论】：