There's always a large empty white space below my footer. How do I ensure that the page ends at the end of the footer?
(1) put a container around your entire page such as “outer”. That should get rid of the white space beneath the footer.
This is because you don't have enough content on the page to push the footer down past the height of the screen resolution. If you add more content into a page it'll force it down and decrease the white space.
Re: I NEED TO COMPLETELY GET RID OF THE SPACE ALLOCATED TO HEADERS AND FOOTERS. On the Page Layout tab of the ribbon, in the Page Setup group, click Margins > Custom Margins... Set Top, Header, Bottom and Footer to 0, then click OK.
In all of the following examples I've just a extremely basic HTML-template by only using three divs: header, content and footer. All the options are minified but should work fine on more advanced websites.
Set for both the body and footer the same background-color.
body { margin: 0px; font-family: Arial; line-height: 20px; background-color: red; } #header { height: 20px; background: #222; color: white; } #content { background: gray; height: 200px; } #footer { height: 20px; background: red; /*Same as body, you could also use transparent */ color: white; }
<div id="header"> Header </div> <div id="content"> Content </div> <div id="footer"> Footer </div>
Use a sticky footer that is fixed at the bottom of the browser window. (I wouldn't recommend this option, because many users don't like sticky footers. You could however use a sticky header)
body { margin: 0px; font-family: Arial; line-height: 20px; } #header { height: 20px; background: #222; color: white; } #content { height: 2000px; } #footer { position: fixed; width: 100%; bottom: 0; left: 0; height: 20px; background: #222; color: white; }
<div id="header"> Header </div> <div id="content"> Content </div> <div id="footer"> Footer </div>
Set a minimum-height for the content div that equals the browser windows height minus the height of the header and footer. (This is my personal favorite because it works cross-browser and is responsive on all screens)
body { margin: 0px; font-family: Arial; line-height: 20px; } #header { height: 20px; background: #222; color: white; } #content { min-height: calc(100vh - 40px); } #footer { height: 20px; background: #222; color: white; }
<div id="header"> Header </div> <div id="content"> Content </div> <div id="footer"> Footer </div>
The easiest way to achieve this is to set min-height to the content above footer like this:
HTML:
<body> <section> This is content of the page </section> <footer> Text of footer </footer> </body>
CSS:
section { min-height: 100vh; /* minus the height of the footer */ }
jsfiddle link: https://jsfiddle.net/x55xh3v7/
But more "optimized" solution is the sticky footer techique which prevents the footer from unnecessary flowing out of the page.
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