Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove white space below footer [closed]

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?

Example

like image 681
lagertha281 Avatar asked Dec 09 '15 20:12

lagertha281


People also ask

How do I get rid of the white space after a footer?

(1) put a container around your entire page such as “outer”. That should get rid of the white space beneath the footer.

Why is there white space below 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.

How do I get rid of the footer gap?

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.


2 Answers

There are three solutions to this problem

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.

  1. Using the background-color

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>
  1. Using a sticky footer

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>
  1. Using a minimum-height for the content

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>
like image 157
Berendschot Avatar answered Sep 28 '22 11:09

Berendschot


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.

like image 26
cuddlecheek Avatar answered Sep 28 '22 10:09

cuddlecheek