时间戳

首页 > 解决方案 > 调整

Bootstrap 网站上的 -height 到 window-height

javascript - 调整
Bootstrap 网站上的 -height 到 window-height

问题描述

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

演示网站截图

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

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

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

谢谢！

标签： javascriptcsstwitter-bootstrapbootstrap-4

解决方案

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

  1. 将d-flex flex-column min-vh-100类添加到容器中。

  2. 将flex-grow-1类添加到内容 div

看到这个小提琴

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

推荐阅读