Is there a way to change the height to fill the rest area?

Question

Now, I need to set the '#bottomshow' div's height full of the rest of the device screen.
At first, I use rem to set the style. The '#bg' and the '#topSelector',I set the height with rem.
How to set the '#bottomshow' match the full empty of the screen. In other words, I need to set the HTML to fill the full mobile phone screen.

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>

This is my code above. mobileRemSet(window,375); is to set the rem unit. Now I set the bottomShow height 40px. Is there a way to change its height to fill the rest area?

Possible duplicate of [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) or https://stackoverflow.com/questions/23321492/css-set-size-of-div-to-fill-remaining-space?s=6|105.6203 — Rob, Oct 13 '17 at 09:52

score 0 · Accepted Answer · answered Oct 13 '17 at 09:56

I think this will work out for you -

Just set the height using calc()

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

in CSS it would be like.

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

Working sample for you.

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>

score 0 · Answer 2 · answered Oct 13 '17 at 10:46

Use flexbox to work it out. Run the below snippet and you'll understand. flex-grow: 1 will basically give all the remaining height to the third child.

.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>

Let me know if it helps.

Is there a way to change the height to fill the rest area?

2 Answers2