height=100%/height=100vh 超越屏幕

Question

我已經設置了高度：100% 但它超出了屏幕，我如何將高度限制為不超過頁腳的 go。

溢出滾動條不應超過頁腳 go。 如果您檢查 #two 的滾動條，它的下端將不可見，但我希望將 #two 高度限制到頁腳，因此滾動條的下端應該在頁腳上方。

 p { display: block; background: #eee; } #one>p { height: 100%; } #two>p { height: 100vh; overflow-y: scroll; }.nimbusfooter { left: 0; right: 0; bottom: 0; position: fixed; color: white; background: black; padding: 5px; font-size: 10pt; line-height: 23.5px; }.footernav { color: white; text-decoration: underline; }.footernav1 { color: white; text-decoration: underline; }

 <div id="one" style="height:50px"> <p>100% Height</p> </div> <div id="two" style="height:50px"> <p>100vh Height</p> </div> <footer class="nimbusfooter"> <span>&copy; <span>{{currentYear}}</span>{{'FOOTER' | translate}}</span> <span style="float:right;"> <a class = "footernav" >{{'ACCESSIBILITY' | translate}}</a>&nbsp;&nbsp;&nbsp; <a class = "footernav1" >{{'PRIVACY_AND_LEGAL' | translate}}</a>&nbsp;&nbsp;&nbsp; <a class = "footernav" >{{'SITEMAP' | translate}}</a> </span> </footer>

Answer 1

這是你要找的嗎？ 下面標記了代碼。 如果沒有，請發表評論。

 /* made the body 100vh tall with no margins so no overflow bars will appear on the body */ body { margin:0; height: 100vh; /*make children flex items so we can use flex-grow and flex-shrink to control their size */ display: flex; flex-direction:column; } body > div { /* make the div elements (ie not the footer which is a <footer> element) grow to fit the available space */ flex-grow:1; } p { /* removed the display: block from these. not really needed */ background: #eee; height: 100%; } #two { overflow-y: scroll; }.nimbusfooter { color: white; background: black; padding: 5px; font-size: 10pt; line-height: 23.5px; flex-grow:0; flex-shrink:1; }.footernav, .footernav1 { color: inherit; /* changed this from white to inherit, so always adopts parent value */ text-decoration: underline; }

 <div id="one" style="height:50px"> <p>100% Height</p> </div> <div id="two" style="height:50px"> <p>100vh Height</p> </div> <footer class="nimbusfooter"> <span>&copy; <span>{{currentYear}}</span>{{'FOOTER' | translate}}</span> <span style="float:right;"> <a class="footernav">{{'ACCESSIBILITY' | translate}}</a>&nbsp;&nbsp;&nbsp; <a class="footernav1">{{'PRIVACY_AND_LEGAL' | translate}}</a>&nbsp;&nbsp;&nbsp; <a class="footernav">{{'SITEMAP' | translate}}</a> </span> </footer>