Remove white space below footer [closed]

Asked 9/12, 2015 at 20:15 Answered 9/12, 2015 at 21:55

html css footer removing-whitespace

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?

Crescentia answered 9/12, 2015 at 20:15 Comment(4)

show the html, and then someone can help you – Basseterre 9/12, 2015 at 20:19

Please post a complete code example in your question. – Durno 9/12, 2015 at 20:20

increase of div between header and footer, but for more we need code – Acclimatize 9/12, 2015 at 20:22

Seems like you need a sticky footer: css-tricks.com/snippets/css/sticky-footer – Vincentvincenta 9/12, 2015 at 20:24

There are three solutions to this problem

In all of the following examples I've included an 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.

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>

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>

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>

Arvind answered 9/12, 2015 at 21:19 Comment(2)

Awesome response. The third one is my preferred method as long as you only need to support modern browsers. Modernizr of course can check whether calc and vh are supported by a user's browser. I think this would fall in the category of progressive enhancement though so probably some sort of JS fallback is not needed. – Surakarta 25/7, 2019 at 19:7

Very good answer. I chose the 3rd option – Tripoli 7/3, 2023 at 7:18

It can be done like this too

#main{
  border:solid;
  height:100vh;
}
#footer{
  border:solid;
}

<div id="main">
Everything here
</div>
<div id="footer">
footer
</div>

Machree answered 9/12, 2015 at 21:55 Comment(1)

adding 100vh to the body fixes it! thanks! – Electrophysiology 2/2, 2018 at 13:39

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.

Acute answered 9/12, 2015 at 21:7 Comment(0)

I suggest using javascript to fix this, something like this:

if($(window).height() > $("body").height()){
   $("footer").css("position", "fixed");
} else {
   $("footer").css("position", "static");
}

Syconium answered 9/12, 2015 at 21:21 Comment(2)

javascript is an overkill for this as long as it is possible to solve with pure css – Acute 9/12, 2015 at 21:38

This can be done with CSS, no need to use javascript, especially including JQuery- unnecessary bloat. – Allium 31/10, 2019 at 20:47

There are three solutions to this problem

Recommended topics

Hot tags