Make Div Stick to The Bottom of Page

Make Div Stick to The Bottom of Page

by

As a web developer, everyone need sometimes to make a div stick to the bottom of a web page.

Generally, I got a lot of questions related to this topic but don’t found the complete guide.

In this tutorial, I am going to share with you a complete tutorial on how to create a fixed sticky footer notification bar in HTML with CSS.

Creating a sticky div is very easy if you have a knowledge of basic CSS. 
So, here you will see how you can stick a div to the bottom of the page using CSS.

HTML

<div> <p>some text</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
<p>sometext</p> 
</div> 
<div class="stickynotification"> 
StickyFooter 
</div>

CSS

.stickynotification {
position: fixed; 
bottom: 0; 
right: 0; 
width: 100%; 
height: 45px;
background-color: #28a745; 
color: #fff; 
font-size: 20px; 
z-index: 99999; 
border-radius: 50px; 
text-align: center; 
}

So, you have learnt how to make a div stick when scrolling with HTML & CSS. If you have any query related to this tutorial, feel free to comment.

Leave a Comment