Why does the green container expand over the blue column when I set height: 100%
or h-100
?
How can I make it to just fit the remaining height of the column?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container" style="background-color: black"> <div class="row"> <div class="col-sm-6" style="background-color: red"> <p>Some</p> <p>More</p> <p>Content</p> <p>Here</p> </div> <div class="col-sm-6" style="background-color: blue"> <h3>Content I want to keep</h2> <section class="d-flex h-100" style="background-color: green"> <button class="btn btn-danger m-auto">Centered Button</button> </section> </div> </div> </div>
If I understand correctly, you want to overlay the green block into the blue block.
It can't set height because there is text ( two ) in between two blocks.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container" style="background-color: black"> <div class="row"> <div class="col-sm-6" style="background-color: red"> <p>Some</p> <p>More</p> <p>Content</p> <p>Here</p> </div> <div class="col-sm-6" style="background-color: blue"> <section class="d-flex h-100" style="background-color: green"> <button class="btn btn-danger m-auto">Centered Button</button> </section> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.