All geek questions in one place

Make bootstrap column by touching bottom of div

I have no idea how to do this, in fact, I want the columns to touch the top of the div at the bottom of the div when the div has a min-height 100%. But this does not work:

 html, body { height: 100%; } body { max-width: 1500px; margin: 0 auto; } #wrapper { min-height: 100%; overflow: auto; } .container { min-height: 100%; overflow: auto; } .container .row .col-md-6 { min-height: 100%; }

The wrapper extends to the bottom of the page, but there is no div in the container. It is distributed only to the end of the content contained in.

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> <div id="wrapper"> <div class="container"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> </div> </body> </html>

Is there something I am missing? The body and html go 100%, the wrapper goes 100%, and then the container does not go 100% ... why?

+5
source share
4 answers

You missed one. And you should use height instead of min-height

( Demo )

 .row { height: 100%; }
+1
source

If enable position:absolute; that will do it. But when using the absolute value, the second div will be placed on top of the first div. As in your example, you have two divs side by side. doing it this way, you also need to add col-md-offset-6 so that both charts display clearly.

 <div id="wrapper"> <div class="container"> <div class="row"> <div class="col-md-6 bg-primary"></div> <div class="col-md-6 bg-info col-md-offset-6"></div> </div> </div> </div>

css will be ...

 .container .row .col-md-6 { position: absolute; height: 100%; overflow: auto; }
0
source

To display this screen as you would like or expected, it looks like you need to enable html and body . I hope this fiddle helps .

I use only height:100vh; , not height:100%; .

Does it help.

 html,body { height:100vh; max-width: 1500px; margin: 0 auto; padding-top: 00px; } /* #wrapper { height: 100%; overflow: auto; } */ .container .row .col-md-6 { height: 100vh; overflow: auto; }
0
source

You need to add a minimum height to all elements (parents). In this case, you are missing a line item.

-3
source

Source: https://habr.com/ru/post/988056/

More articles:


All Articles