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>

the navbar element has a fixed height? add that style too in the relevant css, thanks — Fabrizio Calderan, Oct 10 '18 at 10:06
If your navbar has fixed height, you can set your cover `height: calc(100vh - 100px)` where 100px is navbar height — Elijah Ellanski, Oct 10 '18 at 10:11
It does not, I added the style of the navbar in the question. — yago, Oct 10 '18 at 10:17
Possible duplicate of [How to make a div 100% height of the browser window?](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window) — Rob, Oct 10 '18 at 10:36
@Rob: it is indeed close, but the presence of a non fixed height navbar makes it a bit different (taking 100vh is too large). Maybe should I wrap the both the navbar and the cover in a div that is 100vh? I will try this. — yago, Oct 10 '18 at 11:25
Yes wrap both the navbar and the div you want to fill the leftover space of the viewport in a div with 100vh then add `display:flex` to it, then `flex:1` to the div you want to fill the screen and nothing to the navbar [Here](https://jsfiddle.net/qa9c58r1/) — Rainbow, Oct 10 '18 at 19:45

yago · Answer 1 · 2018-10-10T19:13:05.077

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>

1+ Super technique to set the height of remaining div – Tek Kshetri Mar 12 '20 at 03:15 — Tek Kshetri, Mar 12 '20 at 03:15

akshay kishore · Answer 2 · 2018-10-10T12:51:48.733

0

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.

edited Oct 10 '18 at 12:51

answered Oct 10 '18 at 10:38

akshay kishore

1,017
8
16

home-cover::before is need, as it is a trick to apply opacity only to the background image. Otherwise the text is also transparent, which I do not want. Then adding padding does not achieve what I want, as the div is now bigger that the screen. I really want a div that exactly the size of the browser window, please refer to the link I mentioned in my Question which is exactly what I would like to achieve. – yago Oct 10 '18 at 11:20

Make a Div under navbar fill up all the space

2 Answers2