All geek questions in one place

Remove space below footer

Under the footer is always empty empty space. How to ensure that the page ends at the end of the footer?

Example

+5
source share
4 answers

There are three solutions to this problem:

In all the examples below, I have an exclusively basic HTML template using only three divs: title, content, and footer. All options are minimized, but should work fine on more advanced websites.

  • Using Background Background

Set the body and footer to 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 the sticky footer that snaps to the bottom of the browser window. (I would not recommend this option because many users don't like sticky footers. However, you can 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 minimum height for content

Set the minimum height for div content equal to the height of the browser windows minus the height of the header and footer. (This is my personal favorite because it runs a cross browser and responds to 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>
+10
source

The easiest way to achieve this is to set the minimum height for content above the footer as follows:

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 a more "optimized" solution is the sticky footer method , which prevents excessive footer flow from the page.

+2
source

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

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

It can be done the same way.

 #main{ border:solid; height:100vh; } #footer{ border:solid; } 
 <div id="main"> Everything here </div> <div id="footer"> footer </div>
+1
source

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

More articles:


All Articles