为什么我不能增加这个div的高度（使用bootstrap）？

Question

我正在尝试增加侧边栏的高度，我希望它与页面的高度相同。picture of page我希望左侧的框触摸底部，但是当我使用h-100类时，它不起作用。

元素的html代码：

<div class="container-fluid mt-5">
            <div class="row">
                <div class="col-2 pt-5 sidebar h-100 sticky-top w100">
             ...

提前感谢

Answer 1

您的侧边栏实际上具有与页面相同的高度。您的页面没有触及屏幕底部吗？

您有两种方法可以解决此问题。

1。在您的styles.css中将车身高度设置为100vh

body {
    height: 100vh;
}

2。将页面包装在div中

<div style="height: 100vh">
    <div class="container-fluid mt-5">
            <div class="row">
                <div class="col-2 pt-5 sidebar h-100 sticky-top w100">
             ...
</div>

Answer 2

h-100仅在父div的高度为100％时有效！如果不能将高度设置为父级，则可以使用100vh而不是上面的值

Answer 3

将此代码添加到您的CSS文件中