Sticky Footer

Developer
Chris Coyier
Size
2,089 Kb
Views
58,696
  1. Sticky Footer Previews
  2. Sticky Footer HTML Codes
  3. Sticky Footer CSS Codes
  4. Sticky Footer JS Codes

How do I make an sticky footer?

Content will push it down, but if there isn't enough content, it sticks to bottom. What is a sticky footer? How do you make a sticky footer? This script and codes were developed by Chris Coyier on 04 July 2022, Monday.

Sticky Footer Previews
IQ Test

Sticky Footer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky Footer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page-wrap"> <h1>Sticky Footer</h1> <h2>with Fixed Footer Height</h2> <button id="add">Add Content</button>
</div>
<footer class="site-footer"> I'm the Sticky Footer.
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky Footer - Script Codes CSS Codes

/* Mostly: http://ryanfait.com/sticky-footer/ */
* {	margin: 0;
}
html, body {	height: 100%;
}
.page-wrap { min-height: 100%; /* equal to footer height */	margin-bottom: -142px;
}
.page-wrap:after { content: ""; display: block;
}
.site-footer, .page-wrap:after { /* .push must be the same height as footer */	height: 142px;
}
.site-footer { background: orange;
}

Sticky Footer - Script Codes JS Codes

$("#add").on("click", function() { $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".page-wrap");
});
Sticky Footer - Script Codes
Sticky Footer - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded July 04, 2022
Rating 4.5
Size 2,089 Kb
Views 58,696
Do you need developer help for Sticky Footer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Make This Responsive
Generate Mobile Version of Table
Search Box in Content Moves to Fixed Header
Striped Headers
JQuery and CoffeeScript
Label Pattern with just CSS
Load External Data in React
CssPanelMenu
Bar Navigation with Flexbox and SVG icons
Voting is our Voice
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!