CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling

Last reviewed/updated: 12 May 2016 | Published: 22 Oct 2015 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

Revealing a fixed web page footer upon scrolling is a CSS technique for fixing the position of a web page footer to the bottom of the viewport, positioning other web page content in front of the web page footer, and revealing the web page footer upon scrolling down the web page. Two examples of this technique are provided. Both techniques use the new HTML 5 semantic header, main, and footer elements. Technique 1 uses the header, main, and footer type selectors to style the header, main, and footer. Technique 2 nests a classed div element (i.e., a div element with the class attribute) in the header, main, and footer elements, and uses the div element class selectors to style the header, main, and footer. Some notes on these examples:

  • Support for the new HTML 5 semantic header, main, and footer elements is different cross-browser. Moreover, the user agent styles for some web browsers style some of these elements as block-level elements (i.e., like div with style display: block), others as inline elements (i.e., like span with style display: inline), and this changes over time.
  • IE9+, not IE8-, supports the new HTML 5 semantic header, main, and footer elements. For IE9+ support, use technique 1 header, main, and footer type selectors or technique 2 div class selectors. For IE7+ support, use technique 2 div class selectors.
  • When the demonstration web pages are displayed:
    • If the viewport height is less than or equal to the height of the header plus the height of the main, the entire footer is hidden. To reveal the footer, scroll down the web page.
    • If the viewport height is greater than the height of the header plus the height of the main, and less than the height of the header plus the height of the main plus the height of the footer, the top of the footer is hidden and the bottom of the footer is visible. To reveal the footer, scroll down the web page.
    • If the viewport height is greater than or equal to the height of the header plus the height of the main plus the height of the footer, the entire footer is visible and there is no vertical scrollbar.

1.1. How To Try These Examples On Your Computer

To try these examples on your computer:

  1. Download the following source files to the same drive or folder on your computer:
  2. Double click the .html files.

1.2. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. Technique 1 header, main, And footer Type Selectors

Technique 1 header, main, and footer type selectors: 1.) uses the new HTML 5 semantic header, main, and footer elements; and 2.) uses the header, main, and footer type selectors to style the header, main, and footer. Because the header, main, and footer elements are used, the web browser support and the user agent styles for these elements need to be taken into consideration.

2.1. Technique 1 header, main, And footer Type Selectors Demonstration

Demonstration: CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling Technique 1 header, main, And footer Type Selectors (learnwebcoding.com).

2.2. Technique 1 header, main, And footer Type Selectors Web Browser Support

Web browser support: IE9+, ED12+, FF3+, SF3.1+, CH2+, OP9+.

2.3. Technique 1 header, main, And footer Type Selectors HTML Source Code And Notes

HTML source code: reveal_fixed_footer_upon_scrolling_technique_1.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling Technique 1 <code>header</code>, <code>main</code>, And <code>footer</code> Type Selectors</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="reveal_fixed_footer_upon_scrolling_technique_1.css" />
 </head>
 <body>
  <header>
   <h2>CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling Technique 1 <code>header</code>, <code>main</code>, And <code>footer</code> Type Selectors</h2>
   header type selector
  </header>
  <main>main type selector 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50</main>
  <footer>footer type selector 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />Test if footer content is interactive: <a href="http://www.google.com">Google (google.com)</a>.<br />Web browser support: IE9+, ED12+, FF3+, SF3.1+, CH2+, OP9+.</footer>
 </body>
</html>

Technique 1 header, main, and footer type selectors HTML source code notes:

  • Lines 9 - 12: The <header></header> section.
  • Line 13: The <main></main> section.
  • Line 14: The <footer></footer> section.

2.4. Technique 1 header, main, And footer Type Selectors CSS Source Code And Notes

CSS source code: reveal_fixed_footer_upon_scrolling_technique_1.css (learnwebcoding.com):

* {
  line-height: 1.15;
  text-align: center;
  margin: 0;
}
header, main, footer {
  display: block;
}
header {
  height: 150px;
  background-color: #fcc;
}
main {
  position: relative;
  z-index: 1;
  background-color: #cfc;
  margin-bottom: 430px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 430px;
  background-color: #ccf;
}

Technique 1 header, main, and footer type selectors CSS source code notes:

  • Lines 1 - 8: A CSS reset/normalize for this example. In particular, line 2 line-height: 1.15 works well with line 24 height: 430px. Also, lines 6 - 8 force web browsers to style the header, main, and footer elements as block-level elements.
  • Lines 9 - 12: Styles the header.
  • Lines 13 - 18: Styles the main.
    • As an alternative, lines 14 and 15 can be deleted from the main style rule and z-index: -1 can be added to the footer style rule. However, this changes web browser support from FF3+ to FF4+.
    • As an alternative, lines 14 and 15 can be moved to a body style rule and z-index: -1 can be added to the footer style rule. Web browser support not determined.
  • Line 14: Defines the main as a positioned element.
  • Line 15: Defines the main as positioned in front of (i.e., closer to the user compared to) any other positioned web page elements.
    The z-index property only applies to positioned elements (i.e., elements with the position property assigned any value other than static).
  • Line 16: Required. The user agent styles for most web browsers style the main element with background-color: transparent, which allows the footer to show through the main. Assigns a background-color other than transparent to the main element, which stops the footer from showing through the main.
  • Lines 17 and 24: The main style rule margin-bottom property 430px value is identical to the footer style rule height property 430px value. When these two values are identical, the vertical scrolling down stops at the exact pixel where the entire footer is revealed.
  • Lines 19 - 26: Styles the footer.
    There is no need to explicitly position the footer behind the main.
  • Line 20: Defines the footer as a positioned element. Removes the footer box from the normal flow of content and fixes its position according to any specified top, right, bottom, and left properties.
  • Lines 21 - 23: The bottom: 0 style pins the footer box to the bottom of the viewport. The left: 0 and right: 0 styles stretch the footer box horizontally to fill the entire width of the viewport.
    • The top, right, bottom, and left properties only apply to positioned elements (i.e., elements with the position property assigned any value other than static).
    • To fill the entire width of the viewport, left: 0 and right: 0 can be replaced with width: 100%.

3. Technique 2 Nested div Element Class Selectors

Technique 2 nested div element class selectors: 1.) uses the new HTML 5 semantic header, main, and footer elements; 2.) nests a classed div element (i.e., a div element with the class attribute) in the header, main, and footer elements; and 3.) uses the div element class selectors to style the header, main, and footer. Because the class selectors select div elements, because the selected div elements are nested in the header, main, and footer elements, and because the user agent styles for all web browsers style the div element as a block-level element, the web browser support and the user agent styles for the header, main, and footer elements do not need to be taken into consideration.

3.1. Technique 2 Nested div Element Class Selectors Demonstration

Demonstration: CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling Technique 2 Nested div Element Class Selectors (learnwebcoding.com).

3.2. Technique 2 Nested div Element Class Selectors Web Browser Support

Web browser support: IE7+, ED12+, FF3+, SF3.1+, CH2+, OP9+.

3.3. Technique 2 Nested div Element Class Selectors HTML Source Code And Notes

HTML source code: reveal_fixed_footer_upon_scrolling_technique_2.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling Technique 2 Nested <code>div</code> Element Class Selectors</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="reveal_fixed_footer_upon_scrolling_technique_2.css" />
 </head>
 <body>
  <header>
   <div class="div-in-header-class-selector">
    <h2>CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling Technique 2 Nested <code>div</code> Element Class Selectors</h2>
    .div-in-header-class-selector
   </div>
  </header>
  <main>
   <div class="div-in-main-class-selector">.div-in-main-class-selector 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50</div>
  </main>
  <footer>
   <div class="div-in-footer-class-selector">.div-in-footer-class-selector 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />Test if footer content is interactive: <a href="http://www.google.com">Google (google.com)</a>.<br />Web browser support: IE7+, ED12+, FF3+, SF3.1+, CH2+, OP9+.</div>
  </footer>
 </body>
</html>

Technique 2 nested div element class selectors HTML source code notes:

  • Lines 9 - 14: The <header></header> section.
  • Lines 10: The classed div element nested in the header element.
  • Lines 15 - 17: The <main></main> section.
  • Line 16: The classed div element nested in the main element.
  • Lines 18 - 20: The <footer></footer> section.
  • Line 19: The classed div element nested in the footer element.

3.4. Technique 2 Nested div Element Class Selectors CSS Source Code And Notes

CSS source code: reveal_fixed_footer_upon_scrolling_technique_2.css (learnwebcoding.com):

* {
  line-height: 1.15;
  text-align: center;
  margin: 0;
}
.div-in-header-class-selector {
  height: 150px;
  background-color: #fcc;
}
.div-in-main-class-selector {
  position: relative;
  z-index: 1;
  background-color: #cfc;
  margin-bottom: 430px;
}
.div-in-footer-class-selector {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 430px;
  background-color: #ccf;
}

Technique 2 nested div element class selectors CSS source code notes:

  • Lines 1 - 5: A CSS reset/normalize for this example. In particular, line 2 line-height: 1.15 works well with line 21 height: 430px.
  • Lines 6 - 9: Styles the header.
  • Lines 10 - 15: Styles the main.
    • As an alternative, lines 11 and 12 can be deleted from the main style rule and z-index: -1 can be added to the footer style rule. However, this changes web browser support from IE7+ to IE8+ and from FF3+ to FF4+.
    • As an alternative, lines 11 and 12 can be moved to a body style rule and z-index: -1 can be added to the footer style rule. Web browser support not determined.
  • Line 11: Defines the main as a positioned element.
  • Line 12: Defines the main as positioned in front of (i.e., closer to the user compared to) any other positioned web page elements.
    The z-index property only applies to positioned elements (i.e., elements with the position property assigned any value other than static).
  • Line 13: Required. The user agent styles for most web browsers style the main element with background-color: transparent, which allows the footer to show through the main. Assigns a background-color other than transparent to the main element, which stops the footer from showing through the main.
  • Lines 14 and 21: The .div-in-main-class-selector style rule margin-bottom property 430px value is identical to the .div-in-footer-class-selector style rule height property 430pxvalue. When these two values are identical, the vertical scrolling down stops at the exact pixel where the entire footer is revealed.
  • Lines 16 - 23: Styles the footer.
    There is no need to explicitly position the footer behind the main.
  • Line 17: Defines the footer as a positioned element. Removes the footer box from the normal flow of content and fixes its position according to any specified top, right, bottom, and left properties.
  • Lines 18 - 20: The bottom: 0 style pins the footer box to the bottom of the viewport. The left: 0 and right: 0 styles stretch the footer box horizontally to fill the entire width of the viewport.
    • The top, right, bottom, and left properties only apply to positioned elements (i.e., elements with the position property assigned any value other than static).
    • To fill the entire width of the viewport, left: 0 and right: 0 can be replaced with width: 100%.

4. Resources And Additional Information