html - 有没有办法改变高度以填充休息区？

Question

现在，我需要将“#bottomshow”div 的高度设置为充满设备屏幕的其余部分。
首先，我使用 rem 来设置样式。 '#bg' 和 '#topSelector'，我用 rem 设置高度。
如何设置“#bottomshow”匹配屏幕的全部空白。也就是说，我需要设置HTML来填满整个手机屏幕。

html,
body {
  height: 100%;
}

#bg {
  width: 100%;
  height: 1.76rem;
  background-color: lightgoldenrodyellow;
}

#topSelector {
  width: 100%;
  background-color: rgb(0, 242, 242);
  text-align: center;
  margin: 0;
  height: .44rem;
}

#bottomShow {
  overflow-y: auto;
  height: 40px;
  background-color: purple;
}

<div id="bg"></div>
<div id="topSelector"></div>
<div id="bottomShow">
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/mobileRemSet.js"></script>
<script type="text/javascript">
  mobileRemSet(window, 375);
</script>

这是我上面的代码。 mobileRemSet(window,375);是设置rem单位。现在我设置 bottomShow 高度 40px。有没有办法改变它的高度来填充休息区？

Answer 1

我认为这对你有用 -

只需使用 calc() 设置高度

#bottomShow height = calc(100vh - #bg height + #topSelector height);

在 CSS 中会是这样。

 #bottomShow {
   height:calc(100vh - 2.16rem);
}

为您提供的工作示例。

html,
body {
  height: 100%;
}

#bg {
  width: 100%;
  height: 1.76rem;
  background-color: lightgoldenrodyellow;
}

#topSelector {
  width: 100%;
  background-color: rgb(0, 242, 242);
  text-align: center;
  margin: 0;
  height: .44rem;
}

#bottomShow {
  overflow-y: auto;
  height:calc(100vh - 2.16rem);
  background-color: purple;
}

<div id="bg"></div>
<div id="topSelector"></div>
<div id="bottomShow"></div>