當頁面內容小于螢屏視圖時，我試圖讓我的側邊欄在頁眉和頁腳之間顯示全高。這甚至可以使用引導程式嗎？我找不到任何有效的解決方案。任何幫助將非常感激。
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 75px;
}
.footer {
position: absolute;
height: 75px;
bottom: 0;
width: 100%;
background-color: #303030;
color: white;
}
<nav class="navbar navbar-expand-sm" style="background-color: #303030;">
<div class="container-fluid">
<a class="navbar-brand" href="#" title="Home">MyLogo</a>
</div>
</nav>
<div class="container-fluid h-100">
<div class="row h-100" style="border: 2px solid red;">
<div class="col-3" style="border: 2px solid blue;">
<p>vertical navigation</p>
</div>
<div class="col-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Adipisci error vel recusandae minus ea atque non vitae dolorem commodi dolores
nostrum, est reiciendis maxime ab sit aliquid! Aliquam, modi natus.</p>
</div>
</div>
</div>
<div class="footer">Footer</div>
uj5u.com熱心網友回復：
Bootstrap 將有某些類的屬性是嚴格不可更改的。
我引入了一個名為的新類full-screen，它將使用您的視口的 100% 高度，100vh然后我減去您的高度header并footer使用您的高度calc(100vh - 131px)在哪里。131pxheader footer
我很確定這將適用于所有螢屏尺寸，因為您一直都有固定的頁眉和頁腳尺寸。如果頁眉或頁腳的高度發生變化，只需手動重新計算并將 131px 替換為您計算和調整的任何數字，直到您看不到滾動條。
演示鏈接：https : //jsfiddle.net/awesomestvi/7gxqa265/10/
uj5u.com熱心網友回復：
嘗試
html,
body {
height: 100%;
}
演示在這里：https : //jsfiddle.net/cjrzL6qa/
uj5u.com熱心網友回復：
我知道為什么！！！從 html 的第 6 行中洗掉“h-100”，它將起作用...
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360336.html
下一篇：單擊導航欄外部時如何關閉導航欄