残りの部分を埋めるために高さを変更する方法はありますか？

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高さ= CALC使用して高さを設定

（100vh - + #topSelector高さ#bg高さ）。

で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

それを動作するようにフレキシボックスを使用します。以下のスニペットを実行すると、あなたは理解します。 flex-grow: 1は基本的にすべての残りの高さを3番目の子に与えます。

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

ことができますなら、私に教えてください。