Make a Div under navbar fill up all the space

Question

I'm making a webpage using Bootstrap starting with a horizontal navbar on the top, followed by a div with a background image and some text over it. This cover is then followed by various containers holding text.

I would like the div with the cover to fill up the remaining space on the window, ie that when you load the page, you only see the navbar followed by the cover, until you scroll (as in http://www.dagconseil.com/, except that my cover does not overlap with the navbar).

So far I either get a cover that is only the size of my text title if I set the position of the corresponding div (.home-cover) to relative:

or an image that covers the whole page until the end, if I use absolute positioning:

which is not what I want either.

Here is the relevant section of the 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%;
}

And the section of the HTML page:

<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

I finally came up with two solutions:

• The simplest one is to make the height of the navbar fixed, and use calc(100vh - Hpx) where H is the height of the navbar in px, as suggested in the comments

• The more flexible one, that I finally implemented, is to use javascript to dynamically compute this height. I set the height and min-height of .home-cover to be 100vh in the CSS file initially, and then I dynamically substract the height of the navbar to the viewport height using the following script. Note that it must be performed each time the window is resized.

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

Answer 2

Um sorry if i miss-lead you i have updated the code, I've tried and it works. Ps make the .home-cover-header as absolute. Instead of the image itself(.home-cover) . Now try this for html part

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

and as for 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 please don't forget to provide padding as the div itself is empty.