Sticky footer without fixed height
How do I make an sticky footer without fixed height?
Forked from pismenny's Pen Sticky footer without fixed height.. What is a sticky footer without fixed height? How do you make a sticky footer without fixed height? This script and codes were developed by Hai Nguyen on 29 January 2023, Sunday.
Sticky footer without fixed height - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky footer without fixed height</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="out"> <h1>Sticky footer without fixed height</h1> <div class="push"></div>
</div>
<footer class="footer"> <div class="footer-i">Footer content goes here</div>
</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 without fixed height - Script Codes CSS Codes
* { margin: 0;
}
html, body { height: 100%;
}
.out { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto;
}
body { text-align: center; text-transform: uppercase;
}
h1 { margin-top: 0; padding-top: 2em;
}
.out { background: #ededeb;
}
.footer { background: #ee3728; color: #fff; font-weight: bold;
}
.footer .footer-i { padding: 3em 0;
}
Sticky footer without fixed height - Script Codes JS Codes
$(function() { var footerHeight = $(".footer").height(); $(".out").css("margin-bottom", -footerHeight); $(".push").css("height", footerHeight);
});
$(window).resize(function() { var footerHeight = $(".footer").height(); $(".out").css("margin-bottom", -footerHeight); $(".push").css("height", footerHeight);
});
Developer | Hai Nguyen |
Username | HaiNguyen007 |
Uploaded | January 29, 2023 |
Rating | 3 |
Size | 2,288 Kb |
Views | 6,072 |
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 |
Sticky notes with CSS3 | 2,146 Kb |
Equal Height and Width Columns using Flexbox | 2,015 Kb |
Css-sticky-notes | 1,995 Kb |
Fixed Header Shadow | 3,112 Kb |
CSS Ribbon Headings | 3,068 Kb |
Creating Different CSS3 Box Shadows Effects | 1,814 Kb |
Sticky section header | 2,528 Kb |
A Pen by Hai Nguyen | 2,171 Kb |
Create a stunning menu in CSS3 | 3,074 Kb |
How to Create a Paper Sticky Note Using Only CSS3 | 2,405 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 |
Pure CSS read more toggle | Idered | 2,344 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Css or Czz.. | Judag | 4,111 Kb |
Blog demo to use given styling | Andygirl | 2,412 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!