Fixed Footer at Bottom

byCodingFlicks -August 20, 2021

0

Hello friends, in this blog, we will learn how to create a fixed footer using HTML CSS. in this snippet, the footer will be visible at the Bottom. The snippet's content is short according to viewport height, but if the content size increases, the page will push the footer lower. The HTML part is very simple and basic. We have defined the three basic elements like a header, content, and footer elements. In order to handle the sticky footer, I have given the body element a relative position value. I haven't used position: fixed property for this snippet. To center the content of the footer, I used absolute position values and set the Bottom, left, and right values to zero. Without further explanation, I am providing the source code below to modify it by yourself.

You May Like this:

Fixed Footer at Bottom [ Source Code ]:

For creating the project, first, take an HTML file with a .html extension and a CSS file with a .css extension. It is essential to link the cs file in the HTML file; otherwise, all the HTML elements will not get the style required. Then copy the code below from the code box, paste it into the corresponding file, and save it.

HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Fixed Footer at Bottom</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus veritatis similique, atque quidem at non explicabo alias harum, cupiditate aspernatur nulla dolore amet, obcaecati sit aliquam ut corporis. Quam odio eaque ipsum ab voluptates fugit, rerum recusandae molestiae quibusdam eum, totam vel ipsam animi in modi, similique officia adipisci, possimus nisi hic earum laboriosam. Porro quas id at, quidem veniam. Voluptatum sequi necessitatibus enim, debitis sit consectetur dolore nulla fugit qui doloribus, optio facilis minima fuga quibusdam? Maxime itaque eligendi debitis harum possimus veritatis saepe inventore ab, vel tempora consectetur aut reprehenderit ducimus ullam, optio nostrum iste necessitatibus corporis delectus earum minus. Quae aliquam esse nemo cupiditate sed nobis reprehenderit a ipsa iste possimus labore, facere, fuga pariatur at deleniti eum repellat quam, sapiente quasi voluptas. Soluta ad fugiat repellendus minus commodi amet maxime sint dignissimos necessitatibus eligendi voluptas est numquam laboriosam, delectus officiis assumenda ducimus qui quam maiores iusto dicta accusamus, aut reiciendis! Et repellat vitae, neque, magnam doloribus possimus quia sint quam tenetur omnis fugit nostrum nulla in voluptatum. Nihil nisi labore officiis eligendi sunt voluptatibus quasi, quos incidunt fugiat</p>
  
</div>

<div class="footer">
	<a href="#">Terms & Condition</a>
	<a href="#">Privacy Policy</a>
	<a href="#">Contact Us</a>
</div>
</body>
</html>

CSS:

html {
  height: 100%;
  box-sizing: border-box; 
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
}

.content {
  margin: 0 auto;
  padding-top: 60px;
  max-width: 760px;
  width: 95%;
  font-family: montserrat;
  line-height: 30px;

}
.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #262626;
    text-align: center;
    color: #fff;
}
.footer a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    margin: 0 15px;
}

That's all. You have successfully created a Fixed Footer at the Bottom. for more snippets, please follow us on our social media profiles and stay connected with the blog. Thank you for stopping by.

Please do not enter any spam link in the comment box.