Just a smidge of Javascript to simple HTML/CSS and voila, responsive, dynamic height, sticky footers.
Browser support: IE8+
A Pen by Cory Simmons on CodePen.
<div class="oh"> | |
<h1>Responsive Dynamic Height Sticky Footer</h1> | |
<h3>Insert any amount of content</h3> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est. | |
</p> | |
<p> | |
<button>Click to add another paragraph</button> | |
</p> | |
<p> | |
My final word. | |
</p> | |
</div> | |
<footer class="footer"> | |
<h2>Insert any amount of content</h2> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque voluptate iusto excepturi. | |
</p> | |
<p> | |
<button>Click to add another paragraph</button> | |
</p> | |
</footer> |
var bumpIt = function() { | |
$('body').css('margin-bottom', $('.footer').height()); | |
}, | |
didResize = false; | |
bumpIt(); | |
$(window).resize(function() { | |
didResize = true; | |
}); | |
setInterval(function() { | |
if(didResize) { | |
didResize = false; | |
bumpIt(); | |
} | |
}, 250); | |
$('button').click(function() { | |
$(this).parent().append('<p>Another paragraph</p>'); | |
bumpIt(); | |
}); |
html { | |
position: relative; | |
min-height: 100%; | |
} | |
.oh { | |
overflow: hidden; | |
} | |
.footer { | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
clear: both; | |
} |