Menu
I have the default bootstrap template setup, and my problem is that there is white space between a div and the footer. The white space is caused by not having enough content to fill up the entire page, so the body shows in between the footer and the content div. Is there a way to stretch a bootstrap div to the bottom of the page while also making the footer to stay at the very bottom? Possibly with flex box?
Here is the code I'm working with: (trying to stretch the "wrapper" 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've read many stackoverflow posts on this topic, butI'm still pretty confused about the best practice for this.
608
If you need to make a <div> element extend to the bottom and fill the page, try the following. Use viewport units and set the height and width of the <body> element to “100vh” and “100vw” respectively. Both the margin and padding of the <html> and <body> elements must be set to 0.
In order for this element position at the bottom of the page, you have to add fixed-bottom to the class footer .
Add . align-items-center to the parent element to center its content vertically. Add . justify-content-center to the parent element to center its content horizontally.
Using .align-self-end is used to align a single item in a Flexbox to the right.
Troy, here it is so you can do that.
Set both the html and the body to height:100vh; and also set your div to the same height:100vh;
You can see this in this post that had the same issue.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
