Sticky footer

Developer
Tushar Bandal
Size
2,541 Kb
Views
10,120
  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?

What is a sticky footer? How do you make a sticky footer? This script and codes were developed by Tushar Bandal on 19 December 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> <html lang="en"> <body> <div class="pageOuter"> <div class="header"> Lorem ipsum </div> <div class="midContent"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br/><a href="#" class="addMore" >Add more content</a><br/><a href="#" class="delete" >Delete Content</a></p> </div> <div class="footer"> Lorem ipsum </div> </div> </body>
</html> <script src='https://code.jquery.com/jquery-1.10.2.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky footer - Script Codes CSS Codes

body { margin: 0;
}
body, html { height: 100%; min-height: 100%;
}
.pageOuter { position: relative; min-height: 100%;
}
.footer,
.header { padding: 10px; background: #ccc ;
}
.midContent { padding: 10px 10px 70px 10px;
}
.footer { position: absolute; left: 0; right: 0; bottom: 0;
}

Sticky footer - Script Codes JS Codes

$(document).on('click', '.addMore',function(){ $(this).parent().after('<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br/><a href="#" class="addMore" >Add more content</a><br/><a href="#" class="delete" >Delete Content</a></p>'); });
$(document).on('click', '.delete', function(){ $(this).parents('p').remove() })
Sticky footer - Script Codes
Sticky footer - Script Codes
Home Page Home
Developer Tushar Bandal
Username tusharbandal
Uploaded December 19, 2022
Rating 3
Size 2,541 Kb
Views 10,120
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!

Tushar Bandal (tusharbandal) Script Codes
Name
Drag and drop
Mobile Accordion
Accordian
Theme setting
CSS3 Form
Custom Select Box
Photo gallery
Angular Accordion
A Pen by tushar bandal
CSS3 Gallery
Create amazing video scripts 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!