footer css code example

Example 1: how to get my footer to the bottom of the page using css

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Example 2: html footer

<footer>
<!-- Footer links -->
  <nav>
	<a href="some-url" target="_blank">Footer link</a> <!-- opens in new tab -->
	<a href="some-url">Footer link</a>
	<a href="some-url">Footer link</a>
  </nav>
<!-- Copyright footnote -->
  &copy; 2020 Some copyright message.
<!-- Contact link -->
  <address>
    Contact <a href="mailto:[email protected]">me</a>
  </address>
</footer>

Example 3: :root css

/* Selects the root element of the document:
   <html> in the case of HTML
The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, 

:root represents the <html> 
element and is identical to the selector html, except that its specificity is higher.

*/
:root {
  background: yellow;
}

Tags:

Misc Example

Related