有沒有辦法改變高度來填充休息區？

現在，我需要設置'#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。有沒有辦法改變它的高度來填充休息區？

來源

2017-10-13 jiexishede

的[製作一個div填補餘下的屏幕空間的高度（https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-可能的複製屏幕空間）或https://stackoverflow.com/questions/23321492/css-set-size-of-div-to-fill-remaining-space?s=6|105.6203 – Rob

@Rob謝謝。 – jiexishede

我認爲這將制定出適合你 -

只需設置使用calc()

#bottomShow高度=計算的高度（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>

來源

2017-10-13 09:56:44 weBBer

使用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>

讓我知道，如果它幫助。

來源

2017-10-13 10:46:54

有沒有辦法改變高度來填充休息區？

回答

相關問題