html - 当我们将容器的高度设置为 100vh 以适应屏幕高度但上面还有另一个组件时，如何避免滚动？

Question

考虑以下代码 -

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

我希望 mainContainer 占据屏幕的整个高度。但在它上面还有另一个 div，它有自己的 50px 高度。现在，如果我将 100vh 的高度赋予 mainContainer，那么滚动条会出现在屏幕上，这很明显，但如何避免呢？

标签： htmlcss

Answer 1

添加到头类position: absolute：top: 0

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>