Question

下面我有我的代码。如何在％

中使用高度

<div class="container" >
    <div class="row">
        <div class="col-" id="t1"></div>
    </div>
</div>

的CSS

body{
    background-color:aquamarine;
}
#t1{       
    height:100%;
    border:1px solid brown;
}

当我使用height:100px;它工作正常，但当我使用height:100%;它不起作用。

如何使用bootstrap为每个div提供百分比高度？

Answer 1

您可以尝试添加style="min-height: 70vh;

之类的内容

“vh”代表视口高度。因此，“70vh”表示视口高度的70％。

以下是使用Bootstrap类控制高度的一些其他方法：

Answer 2

您可能不想使用vh，因为它基于设备的视口，您看起来想要将其基于父容器。 height基于父元素的高度。当你说height:100%;时你会想到，“100％的是什么？”。这将是父母的高度。

因此，请为父级提供某个单位值的高度，例如px或em或甚至vh。

现在这可能会变得非常棘手，因此始终建议阅读the CSS spec。