Posted inTechnology / CSS / Programming

CSS Sticky Footer Tutorial Example From Scratch

Today, We want to share with you CSS Sticky Footer Tutorial Example From Scratch.In this post we will show you fixed footer overlaps content, hear for make div stick to bottom of parent we will give you demo and example for implement.In this post, we will learn about keep footer at bottom of page when scrolling with an example.

CSS Sticky Footer Tutorial Example From Scratch

There are the Following The simple About CSS Sticky Footer Tutorial Example From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop responsive sticky footer, so the css tricks sticky for this example is following below.

Creating a Sticky Footer

Step 1: HTML Part


  

Step 1: Pure CSS Part

main {
  min-height: calc(100vh - 50px);
}
footer {
  height: 50px;
}

Step 3: JavaScript Part

function set_main_height(){
   var footerHeight = $('footer').innerHeight();
   $('main').css('min-height','100vh -'+footerHeight);
}
 
$(function() { 
  set_main_height();
  window.resize(function(){
    set_main_height();
  });
});

Simple Sticky Footer Examples

Example 1: Sticky Footer with Negative Margin

HTML Part

Sticky Footer with Negative Margin 1

Footer

CSS Part

html, body {
  height: 100%;
  margin: 0;
}
.content {
  padding: 20px;
  min-height: 100%;
  margin: 0 auto -50px;
}
.footer,
.push {
  height: 50px;
}

js Part

$("#add").on("click", function() {
  $("

Welcome to PakaInfo – a blog where you will learn about General Information, Jobs, Earn Money, Education, Health, Technology, Life Style, Science, Top10, Nature. In other words, it is a community of software engineers and developers.

").insertBefore(".push"); });

Example 2: Sticky Footer Navbar Template for Bootstrap

HTML Part

Sticky Footer Navbar Template for Bootstrap

Footer

CSS Part

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

js Part

$("#add").on("click", function() {
  $("

Welcome to PakaInfo – a blog where you will learn about General Information, Jobs, Earn Money, Education, Health, Technology, Life Style, Science, Top10, Nature. In other words, it is a community of software engineers and developers.

").appendTo(".content-inside"); });

Example 3: Sticky Footer Template for Bootstrap

HTML Part

Sticky Footer with calc()

Footer

CSS Part

.content {
  min-height: calc(100vh - 70px);
  padding: 40px 40px 0 40px;
}
.footer {
  height: 50px;
}

js Part

$("#add").on("click", function() {
  $("

Welcome to PakaInfo – a blog where you will learn about General Information, Jobs, Earn Money, Education, Health, Technology, Life Style, Science, Top10, Nature. In other words, it is a community of software engineers and developers.

").appendTo(".content"); });

Example 4: Adding a Sticky Footer Using CSS

HTML Part

Adding a Sticky Footer Using CSS

Footer

CSS Part

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1 0 auto;
  padding: 20px;
}
.footer {
  flex-shrink: 0;
  padding: 20px;
}

js Part

$("#add").on("click", function() {
  $("

Welcome to PakaInfo – a blog where you will learn about General Information, Jobs, Earn Money, Education, Health, Technology, Life Style, Science, Top10, Nature. In other words, it is a community of software engineers and developers.

").appendTo(".content"); });

Example 5: Pure CSS3 Sticky Footer

HTML Part

Pure CSS3 Sticky Footer with Grid

Footer

CSS Part

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.content {
  padding: 20px;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}


* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 0 0 20px 0;
}
.footer {
  background: #42A5F5;
  color: white;
  padding: 20px;
}

js Part

$("#add").on("click", function() {
  $("

Welcome to PakaInfo – a blog where you will learn about General Information, Jobs, Earn Money, Education, Health, Technology, Life Style, Science, Top10, Nature. In other words, it is a community of software engineers and developers.

").appendTo(".content"); });
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about CSS Sticky Footer Tutorial Example From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype