html - 在导航栏下创建一个 Div 填满所有空间

Question

我正在使用 Bootstrap 制作一个网页，从顶部的水平导航栏开始，然后是带有背景图像的 div 和上面的一些文本。这个封面之后是各种包含文本的容器。

我希望带有封面的 div 填充窗口上的剩余空间，即当您加载页面时，您只会看到导航栏后面跟着封面，直到您滚动(如 http://www.dagconseil.com/ 中，除了我的封面不与导航栏重叠)。

到目前为止，如果我将相应的 div (.home-cover) 的位置设置为相对的，我要么得到一个只有我的文本标题大小的封面:

或者覆盖整个页面直到最后的图像，如果我使用绝对定位:

这也不是我想要的。

这是 CSS 的相关部分:

html {
  position: relative;
  min-height: 100%;
}

.navbar {
  top: 0;
  left: 0;
  width: 100%;
}

.home-cover {
  position:relative;
  height:100%;
  min-height:100%;
  width:100%;
  color: rgb(48,69,151);
}

.home-cover::before {
  height:100%;
  min-height:100%;
  width:100%;
  content: "";
  background-position:center center;
  z-index:0;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
  -o-background-size: cover;
  overflow:hidden;
  background-image: url("img/home-cover.jpg");
  opacity: 0.4;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

.home-cover-header {
  position: relative;
  text-align: center;
  width: 100%;
}

以及 HTML 页面的部分:

<nav class="navbar navbar-light navbar-expand-sm flex-nowrap">
    <!-- nav bar content -->
</nav>
<div class="home-cover">
  <div class="home-cover-header">
    <h1>MY AWESOME AGENCY</h1>
    <br><br><br><br>
    <h2>BRAND CONTENT STRATEGY</h2>
  </div>
</div>
<div class="container-large-padding container">
    <!-- rest of the content -->
</div>

Answer 1

我最终想到了两个解决方案:

• 最简单的方法是固定导航栏的高度，并使用 calc(100vh - Hpx)，其中 H 是以像素为单位的导航栏高度，如评论中所建议的

• 我最终实现的更灵活的方法是使用 javascript 动态计算此高度。我最初在 CSS 文件中将 .home-cover 的高度和最小高度设置为 100vh，然后使用以下脚本将导航栏的高度动态减去视口(viewport)高度。请注意，每次调整窗口大小时都必须执行此操作。

  <script type="application/javascript">
    var resizeCover = function () {
      var homeCover = document.getElementById('homecover-1');
      var newHeight = document.documentElement.clientHeight -
        document.getElementById('navbar-1').clientHeight;
      homeCover.style.height = newHeight + "px";
      homeCover.style.minHeight = newHeight + "px";
    }
  
    $(document).ready(resizeCover);
    window.onresize = resizeCover;
  </script>