Extend Footer Height to the Bottom of the Page

Learn how to use the CSS box-shadow property to extend your web page footer background color to the bottom of the page.
Computer monitor screen

Table of Contents

White Space Below Footer

If you have a footer that is a different color than the page background of your website, the footer color might not completely extend to the bottom of the page with little content.  The graphic below demonstrates this issue.  The dark gray page background appears as “white space” (or empty space) below the teal footer.  

Web page with a short footer
				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="styles.css">

    <title>Home | Acme Design Inc</title>
</head>
<body>

<header>
<h1>Header</h1>
</header>

<nav>
<h1>Navigation</h1>
</nav>

<main>
<h2>Main Body</h2>
<article>
<p>Mauris vitae lobortis lorem, at sodales diam. In efficitur, ante ac rhoncus facilisis, est augue tincidunt enim, vel varius nisl ligula eu nisl. Cras sodales nunc augue, ac ultrices sapien ultrices vitae. Quisque in vestibulum magna, nec tempus nisl. Praesent sodales fermentum sodales. Aliquam erat volutpat. Integer sagittis consequat mauris, non elementum lorem tempor eget. Pellentesque non risus neque. Etiam odio nisi, scelerisque eget erat non, faucibus gravida nulla.</p>
</article></main>

<footer>
<h1>Footer</h1>
</footer>
    
   
</body>
</html>

				
			
				
					body {
font-family:Arial, Helvetica, sans-serif;
box-sizing: border-box;
margin:0;
padding:0;
font-size:17px;
background-color:#333;
}

h1, h2, p {text-align:center;}
h1 {font-size:2rem;}
h2 {font-size:1.75rem;}
p {font-size:1.125rem;}

header, nav, main, footer {width:100%; margin:0 auto; 
    display:flex; flex-direction: column; justify-content: center; align-items: center; padding:20px 10px;}

header {background-color:#FF6600; color:white;}

nav {background-color:#FFCC00;}

main {background-color:#21357B; color:white; }
article {max-width:800px; margin:0 auto; padding:5px; }

footer {background-color:teal; color:white;}

				
			

Use Box-Shadow Property to Remove Footer White Space

The box-shadow property allows you to extend your footer background color to the bottom of the page, regardless of page length.

Box-Shadow General Syntax

box-shadow: none |  h-offset | v-offset |  blur |  spread color  |  inset |  initial |  inherit;

  • h-offset:  horizontal offset; shadow is positioned to the right (positive number) or left (negative number) of the element
  • v-offset:  vertical offset; shadow is positioned below (positive number) or above (negative number) the element
  • blur:  shadow blur; higher numbers mean more blurring
  • spread:  shadow size; higher numbers mean a larger shadow

The code below creates a box-shadow on its parent element that has horizontal and vertical offsets of 10px.  The shadow’s blur is 8px.  The shadow color is dark gray.

				
					box-shadow: 10px 10px 8px #888888;
				
			

Box-Shadow Syntax for Extending the Footer

To extend the footer background to the bottom of the screen, use the syntax below.   This syntax uses “vh” or “viewport height” instead of pixels.

				
					footer {
    box-shadow: 0 50vh 0 50vh #000000;
}

				
			

The code creates a box-shadow on the footer that:

  • Has no horizontal offset
  • Has a vertical offset that extends 50% of the viewport height below the the footer
  • Has no blur
  • Has a size of 50% of the viewport height
Subscribe
Notify of

0 Comments
Inline Feedbacks
View all comments