I have implemented the sticky footer many times from http://www.cssstickyfooter.com/. The only problem is that the footer has a fixed height. Is there a pure CSS solution to allow the footer to grow based on the content inside?
A JS solution wouldn't be bad, but CSS would be best.
Thanks in advance for the help.
Updated Answer
The original answer is over five years old, and fails in that the padding is not updated in the event the footer height is increased, or decreased. You could bind to the resize event of the window, and call this on every fire, but that would be a bit excessive.
I would instead encourage you to bind to the window.onresize event, but throttle the logic such that we aren't computing styles, thrashing the DOM, and causing layouts dozens of times per second:
(function () {
"use strict";
var body = document.querySelector( "body" );
var footer = document.querySelector( "footer" );
window.addEventListener(
// Throttle logic: http://jsfiddle.net/jonathansampson/7b0neb6p/
"resize", throttle( adjustContainerPadding(), 500 )
);
function adjustContainerPadding () {
body.style.paddingBottom = window.getComputedStyle( footer ).height;
return adjustContainerPadding;
}
}());
When the page loads, we immediately fire the adjustContainerPadding method. This method sets the paddingBottom of the body to match the computed height of the footer. Note here that the window.getComputedStyle method requires IE9 or greater.
Fiddle: http://jsfiddle.net/jonathansampson/7b0neb6p/
Original Answer
I would encourage you (for simplicity) to just use the cssstickyfooter code, and set the css values via javascript (jQuery code follows).
$(function(){
var footerHeight = $("#footer").height();
$("#main").css("padding-bottom", footerHeight);
$("#footer").css("margin-top", -footerHeight);
});
code is untested, but should work just fine
No matter how much content you have in your footer, this will automatically reset the CSS values for you.
I really don't know why everyone is not using this technique. It's so easy
NO FIXED HEIGHT, JAVASCRIPT OR TABLES
Expands when more content, and when there isn't it sticks to bottom
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}<body>
<header>
Header
</header>
<div class='content'>
This is the page content
<br>
PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>DISPLAY TABLE = NO JS and NO fixed height!
Works in modern browsers ( IE 8 + ) - I tested it in several browser and it all seemed to work well.
I discovered this solution because I needed a sticky footer without fixed height and without JS. Code is below.
Explanation: Basically you have a container div with 2 child elements: a wrapper and a footer. Put everything you need on the page ( exept the footer ) in the wrapper. The container is set to display: table; The wrapper is set to display: table-row; If you set the html, body and wrapper to height: 100%, the footer will stick to the bottom.
The footer is set to display: table; as well. This is necessary, to get the margin of child elements. You could also set the footer to display: table-row; This will not allow you to set margin-top on the footer. You need to get creative with more nested elements in that case.
The solution: https://jsfiddle.net/0pzy0Ld1/15/
And with more content: http://jantimon.nl/playground/footer_table.html
/* THIS IS THE MAGIC */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
html,
body,
#container,
#wrapper {
height: 100%;
}
#container,
#wrapper,
#footer {
width: 100%;
}
#container,
#footer {
display: table;
}
#wrapper {
display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */
html {
font-family: sans-serif;
}
#header,
#footer {
text-align: center;
background: black;
color: white;
}
#header {
padding: 1em;
}
#content {
background: orange;
padding: 1em;
}
#footer {
margin-top: 1em; /* only possible if footer has display: table !*/
}<div id="container">
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
<br>
<br>some more content
<br>
<br>even more content
</div>
</div>
<div id="footer">
<p>
FOOTER
</p>
<br>
<br>
<p>
MORE FOOTER
</p>
</div>
</div>The following method is extremely simple and ensures that your footer adapts as your window resizes.
Inspiration from https://getbootstrap.com/examples/sticky-footer/ and http://blog.mojotech.com/responsive-dynamic-height-sticky-footers/
CSS
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
JS
function positionFooter() {
$("main").css("padding-bottom", $("footer").height());
}
// Initally position footer
positionFooter();
// Reposition footer on resize
$(window).resize(function() {
positionFooter();
});
Please ensure that it works on all browsers but try:
#footer { position:absolute; top:100%; width:100%; }
check it out, it will be useful for you
var margin;
$(function(){
var pageHeight = $('#pageKeeper').height();
var clientHeight = window.innerHeight || document.documentElement.clientHeight;
if (clientHeight > pageHeight) {
margin = clientHeight - pageHeight;
if (margin <= 120) {
$('#footer').css('top', pageHeight + 30)
}
else {
$('#footer').css('top', clientHeight - 90)
}
}
else {
margin = pageHeight - clientHeight;
$('#footer').css('top', pageHeight + 30)
}
$('#footer').show()
})
© 2022 - 2024 — McMap. All rights reserved.