All geek questions in one place

Bootstrap div stretches to the bottom of the page

I have a setup for the bootstrap template, and my problem is that there is a space between the div and the footer. The white space is caused by the fact that you do not have enough content to fill the entire page, so the body is displayed between the footer and the contents of the div. Is there a way to stretch the botstrap div at the bottom of the page and also make the footer at the very bottom? Perhaps with a flexible box?

Here is the code I'm working with: (trying to stretch the wrapper of a div to the footer)

HTML

<body ng-app="firstApp"> <div ng-view="" class="everything"> <div class="wrapper"> <div class="mid"> <div class="row"> <div class="col-sm-12"> <p>This is in a div that should fill the screen</p> </div> </div> </div> <div class="push"></div> </div> <footer class="footer"> <div class="container"> <p>Hello I'm the footer</p> </div> </footer> </div> <!--closes the "everything" class -->

CSS

  html { height: 100%; } body { height: 100% !important; font-family: 'Roboto', sans-serif; color: black; background: green; } .footer { text-align: center; padding: 30px 0; height: 4em; background-color: #7ccbc8; width: 100%; }

I read a lot of stackoverflow posts on this topic, but I'm still pretty confused about best practices for this.

+6
source share
2 answers

Troy, this is how you can do it.

Set both html and body to height:100vh; , and also set the div to the same height:100vh;

You can see this in this post that had the same issue.

+9
source

What worked for me is to set as height: 100%; , so min-height: 100vh; in the fill element.

 .fill { min-height: 100vh; height: 100%; }

And adding this element to the classes of the parent container.

+1
source

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

More articles:


All Articles