问题:

Below I have my code. How to use the height in %

<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;
}

When I use height:100px; It works fine but when I use height:100%; It doesn't work.

How to give the height in percentage using bootstrap for each div?

回答1:

You can try adding something like style="min-height: 70vh;

"vh" stands for viewport height. So, "70vh" means 70% of the viewport height.

Here are a few other ways to control the height using Bootstrap classes:

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

回答2:

You probably don't want to use vh because that is based on the viewport of the device and you look like you are wanting to base this on a parent container. height is based on the height of the parent element. When you say height:100%; you should think, "100% of what?". That would be the height of the parent.

So give the parent a height in some unit value like px or em or even vh.

Now this can get really tricky at times so reading the CSS spec is always recommended.