css - 百分比高度在任何浏览器中都不起作用(使用 Bootstrap )

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”代表视口(viewport)高度。因此，“70vh”表示视口(viewport)高度的 70%。

以下是使用 Bootstrap 类控制高度的其他几种方法:

https://getbootstrap.com/docs/4.0/utilities/sizing/