how to avoid scrolling when we set height of container to 100vh to fit screen height but there is another component on top of it?

Question

Consider the following code-

<div class="header">
  <span>Heading element</span>
</div>
<div class="mainContainer">
  <span>Main content</span>
</div>

.header
{
  height:50px;
  border:1px solid black;
}
.mainContainer
{
  height:70vh;
  border:1px solid black;
}

I want mainContainer to take the full height of the screen. But there is another div on top of it which has his own height of 50px. Now if I give the height of 100vh to mainContainer then the scrollbar appears on the screen which is obvious but how to avoid it?

score 0 · Answer 1 · answered Jan 05 '20 at 12:29

Add position: absolute with top: 0 to header class:

body{
  margin: 0;
}
.header
{
  height:50px;
  border:1px solid black;
  position: absolute;
  top: 0;
}
.mainContainer
{
  height:100vh;
  border:1px solid black;
  position: relative;
}

<div class="header">
  <span>Heading element</span>
</div>
<div class="mainContainer">
  <span>Main content</span>
</div>

how to avoid scrolling when we set height of container to 100vh to fit screen height but there is another component on top of it?

1 Answers1