为什么我不能增加这个 div 的高度（使用引导程序）？答案

【问题标题】：Why cant i increase the height of this div (using bootstrap)?为什么我不能增加这个 div 的高度（使用引导程序）？
【发布时间】：2023-03-03 12:11:01
【问题描述】：

我正在尝试增加侧边栏的高度，我希望它与页面的高度相同。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">
             ...

提前致谢

【问题讨论】：

标签： html css height

【解决方案1】：

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

【讨论】：

【解决方案2】：

1.如果你想设置一个div的高度首先你必须把div设置为display-inline-block。因为内联元素不允许高度，而 div 是内联元素。使用 css 手动设置高度

.container-fluid {
    height: 100px;
}

如果h-100根据div或子元素的内容表示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">

测试文本

【讨论】：

【解决方案3】：

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

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

1.在你的styles.css中设置body height为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>

【讨论】：

Ty 为您的帮助，不幸的是，第一个选项不起作用，第二个选项起作用，但我只需要使用 container-fluid 将 h-100 类添加到 div 中。但是现在我有一个问题，我的边栏不随屏幕移动，我有点希望它像我在引导站点上找到的这个例子一样移动：getbootstrap.com/docs/4.4/examples/dashboard/#。你知道怎么做吗？
那是因为你发布的例子的位置是固定的。

【解决方案4】：

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

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

将此类添加到您的 div 中

class="col-md-12 myNewDivHeight"

【讨论】：