Sticky Footer
How do I make an sticky footer?
Http://codepen.io/chriscoyier/pen/uwJjr. What is a sticky footer? How do you make a sticky footer? This script and codes were developed by Boost New Media on 12 June 2022, Sunday.
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="wrap"> <div class="contentWrap"> <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> <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> </div>
</div>
<footer class="site-footer"> <p>I'm the Sticky Footer.</p>
</footer>
</body>
</html>
Sticky Footer - Script Codes CSS Codes
/*================================= http://codepen.io/chriscoyier/pen/uwJjr
=================================*/
* { margin: 0; box-sizing: border-box;
}
html, body { height: 100%; font-size: 1.35rem; line-height: 1.5;
}
.wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px;
}
.wrap:after { content: ""; display: block;
}
p { margin-bottom: 40px;
}
.site-footer, .wrap:after { /* .push must be the same height as footer */ height: 142px;
}
.site-footer { background: #B72039;
}
/*=================================
Cosmetic Layout
=================================*/
.contentWrap { width: 600px; margin: 40px auto;
}
.site-footer { text-align: center;
}
.site-footer p { line-height: 142px; margin-bottom: 0; font-size: 1rem; color: white
}
| Developer | Boost New Media |
| Username | boostnewmedia |
| Uploaded | June 12, 2022 |
| Rating | 3 |
| Size | 1,922 Kb |
| Views | 68,816 |
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!
| Name | Size |
| Boost SVG Logo | 4,966 Kb |
| Basic - Flex with float fallback. | 4,242 Kb |
| Complex SVG Path Question | 3,049 Kb |
| A Pen by Boost New Media | 5,594 Kb |
| Flexbox Sticky Footer | 3,404 Kb |
| CSS CALC | 2,611 Kb |
| Test | 3,533 Kb |
| Calc using CSS | 2,306 Kb |
| Image toggle using flex | 9,472 Kb |
| IE11 Test | 4,998 Kb |
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!
| Name | Username | Size |
| Exploring css spinners | Akagr | 3,569 Kb |
| A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
| JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
| Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
| CSS Parent Selector | Tomhodgins | 2,143 Kb |
| NgEasyModal | Lorenzodianni | 4,159 Kb |
| Caputre Cam with JS | KimmoCommit | 2,795 Kb |
| Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
| Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
| Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!