使导航栏下的Div填满所有空间

Question

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

我希望带盖子的div填充窗口上的剩余空间，即，当您加载页面时，您只能看到导航栏，然后是盖子，直到滚动为止（如http://www.dagconseil.com/ ，但我的封面不与导航栏重叠。

到目前为止，如果我将对应的div（.home-cover）的位置设置为relative，那么我得到的封面仅是文本标题的大小。

或一张覆盖整个页面的图像（如果我使用绝对定位的话）：

这也不是我想要的。

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

很抱歉，如果我错过了您的行程，我已经更新了代码，我已经尝试过了，并且可以正常工作。 PS将.home-cover-header设为绝对。而不是图像本身（.home-cover）。现在尝试使用html部分

<div class="home-cover">
</div>
<div class="home-cover-header">
    <h1>MY AWESOME AGENCY</h1>
    <br><br><br><br>
    <h2>BRAND CONTENT STRATEGY</h2>
</div>

对于css，

.home-cover-header{
position:absolute;
top :10%;
}
.home-cover {
      position:relative;
      height:100%;
      padding:25%;
      min-height:100%;
      width:100%;
      color: rgb(48,69,151);
      background-image: url("img/home-cover.jpg");
      opacity: 0.8;
    }

P.s请不要忘记提供填充，因为div本身是空的。

Answer 2

我终于想出了两种解决方案：

• 最简单的方法是固定导航栏的高度，然后使用calc（100vh-Hpx），其中H是导航栏的高度（以px为单位），如评论中所建议的那样。

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

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