有没有办法改变高度来填补休息区？

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身高+ #topSelector身高）;

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>

Answer 2

使用flexbox解决问题。运行以下代码段，您就会明白。 flex-grow: 1基本上会给第三个孩子留下所有剩余的身高。

.p {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.c1, .c2 {
  height: .44rem;
  background-color: green;
}

.c3 {
  flex-grow: 1;
  background-color: red;
}

<div class="p">

  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
</div>

如果有帮助，请告诉我。