How to create a div that occupy the whole screen and folds to an header when scrolling

Question

I want to create a div that span the whole real estate of my device exactly like Sample site

What I tried doing is to create an header with fixed height but could not create the div below the header to span the remaining height.

//Fixed Header
 .fixed-nav {
    position: fixed;
    width: 100%;
    height: 69px;
    background-color: #f2333a;
}

.x-div {
    position: relative;
    height: 100%;
    background-color: #F2333A;
    z-index: 10;
}

If the header takes up the entire height of the screen, what do you mean by "the remaining height"? — symlink, Sep 19 '19 at 00:53
Refer: https://stackoverflow.com/a/28695653/3002106 and https://stackoverflow.com/a/1719521/3002106 — Nevin, Sep 19 '19 at 01:06
@symlink If you check the link I posted above you will see it has an header with fix height and a div underneath that spans the remaining height and its scrollable. I'm talking about the second div — Prodigy, Sep 19 '19 at 01:07

score 2 · Accepted Answer · edited Sep 19 '19 at 07:52

If you want the div below the nav to span the remaining height use height: calc(100vh - 69px) where 69px can be the height of any fixed height object.

body {
  margin: 0;
}

.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.fixed-nav {
  width: 100%;
  height: 69px;
  background-color: red;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.header {
  width: 100%;
  height: calc(100vh - 69px);
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: red;
  z-index: 1;
  margin: 0;
}

.more-content {
  height: 100vh;
  width: 100%;
  margin: 20px;
}

<div class="container">
  <nav class="fixed-nav">NAV</nav>
  <header class="header"></header>
</div>
<div class="more-content">Rest of webpage
</div>

How to create a div that occupy the whole screen and folds to an header when scrolling

1 Answers1