为什么我不能增加这个div的高度(使用引导)？

Question

我试图增加边栏的高度，我希望它与页面的高度相同。页图，我希望左边的框能触到底部，但是当我使用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中的身高设置为100 1.。

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

只有当父div有100%高时，h-100才能工作！如果不能将高度设置为父级，则可以使用100 to代替上面的

Answer 3

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

.container-fluid {
    height: 100px;
}

1. 如果h-100是根据div或子元素的内容表示height: 100%的话。因此，高度将仅为文本高度。