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

Question

我正在尝试增加侧边栏的高度，我希望它与页面的高度相同。picture of page 我想让左边的盒子触及底部，但是当我使用 class 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 will work only if the parent div has 100% height ! you can use 100vh instead of above if you cant set the height to the parent

Answer 3

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

@media screen and (min-width: 1024px) {
    myNewDivHeight{
        height:250px;
    }
}

将此 class 添加到您的 div

class="col-md-12 myNewDivHeight"

Answer 4

1.If 你想设置 div 的高度首先你必须将 div 设置为 display-inline-block。因为内联元素不允许高度并且 div 是内联元素。使用 css

手动设置高度

.container-fluid {
    height: 100px;
}

如果根据div或子元素的内容，h-100表示height: 100%。所以高度将只是文本高度。

<div class="container-fluid mt-5">
    <div class="row">
      <div class="col-2 pt-5 sidebar h-100 w-100 d-inline-block sticky-top">

测试文本

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

Why cant i increase the height of this div (using bootstrap)?

html

css

height