HTML CSS Exercise: CSS Sticky Footer

Last update on March 04 2024 06:51:48 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE HTML><!-- Specifies the document type and version of HTML -->
<html lang="en"><!-- Begins the HTML document and sets the language to English -->
<head>
<meta charset=utf-8><!-- Sets the character encoding to UTF-8 -->
<title>HTML CSS exercise - create a sticky footer</title><!-- Sets the title of the webpage -->
<style type="text/css"> /* Begins CSS styling */
.footer { /* Styles for the footer class */
position:fixed; /* Sets the position of the footer to fixed */
bottom:0; /* Positions the footer at the bottom of the viewport */
display:block; /* Makes the footer a block-level element */
width:100%; /* Sets the width of the footer to 100% */
background-color: red; /* Sets the background color of the footer to red */
color: #fff; /* Sets the text color of the footer to white */
}
</style>
</head>
<body>
<p><!-- Begins a paragraph -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...........
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat..........
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.........
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ........
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat..........
</p><!-- Ends the paragraph -->
<div class="footer"><!-- Begins the footer -->
<p>I will be stuck here.</p><!-- Footer content -->
</div><!-- Ends the footer -->
</body>
</html>

Explanation:

This HTML/CSS code creates a sticky footer that remains fixed at the bottom of the viewport.
The .footer class is styled using CSS to position it fixed at the bottom of the viewport and set its width, background color, and text color.

Live Demo :

See the Pen footer-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes