Tagged: keep footer at bottom of page when scrolling

CSS Sticky Footer Tutorial Example From Scratch 0

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

<body>
  <main><main>
  <footer></footer>
</body>

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

<div class="content">
  <h1>Sticky Footer with Negative Margin 1</h1>
  <p><button id="add">Include Data</button></p>
  <div class="push"></div>
</div>

<footer class="footer">
  Footer 
</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() {
  $("<p>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.</p>").insertBefore(".push");
});

Example 2: Sticky Footer Navbar Template for Bootstrap

HTML Part

<div class="content">
  <div class="content-inside">
    <h1>Sticky Footer Navbar Template for Bootstrap</h1>
    <p><button id="add">Include Data</button></p>
  </div>
</div>

<footer class="footer">
  Footer 
</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() {
  $("<p>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.</p>").appendTo(".content-inside");
});

Example 3: Sticky Footer Template for Bootstrap

HTML Part

<div class="content">
  <h1>Sticky Footer with calc()</h1>
  <p><button id="add">Include Data</button></p>
</div>

<footer class="footer">
  Footer 
</footer>

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

js Part
$("#add").on("click", function() {
  $("<p>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.</p>").appendTo(".content");
});

Example 4: Adding a Sticky Footer Using CSS

HTML Part

<div class="content">
  <h1>Adding a Sticky Footer Using CSS</h1>
  <p><button id="add">Include Data</button></p>
</div>

<footer class="footer">
  Footer 
</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() {
  $("<p>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.</p>").appendTo(".content");
});

Example 5: Pure CSS3 Sticky Footer

HTML Part

<div class="content">
  <h1>Pure CSS3 Sticky Footer with Grid</h1>
  <p><button id="add">Include Data</button></p>
</div>

<footer class="footer">
  Footer
</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() {
  $("<p>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.</p>").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.