Menu icon Foundation
Small Snippet for sticky-footer

Yesterday i made this little sticky-footer snippet for an client maybe somebody needs it too.

Cheers
Markus

<script type="text/javascript">
	$(document).ready(function () {
		footation();
	   $(window).resize(function() {
	        footation();
	    });
	});
	function footation() { 
		var $fsw = $("#site-wrapper");
		var $fbw = $("#blow-wrapper");
		var $ffw = $("#footer-wrapper").height();
		$fbw.css({"height": $ffw + "px"});
		$fsw.css({"margin-bottom": -$ffw + "px"});
	};
</script>
    
<style type="text/css">
    #site-wrapper {
    position: 		relative;
	margin: 		0px auto;
    height: 		auto !important;
    height: 		100%;
    min-height: 	100%;
    }
     
    #blow-wrapper {
    clear:			both;
    }
     
    #footer-wrapper {
    position: 		absolute;
	margin: 		0px auto;
	background: 	#333;
    bottom: 		0px !important;
	width: 			100%;
    }
</style>
            

         

sticky footerjsSnippet

Yesterday i made this little sticky-footer snippet for an client maybe somebody needs it too.

Cheers
Markus

<script type="text/javascript">
	$(document).ready(function () {
		footation();
	   $(window).resize(function() {
	        footation();
	    });
	});
	function footation() { 
		var $fsw = $("#site-wrapper");
		var $fbw = $("#blow-wrapper");
		var $ffw = $("#footer-wrapper").height();
		$fbw.css({"height": $ffw + "px"});
		$fsw.css({"margin-bottom": -$ffw + "px"});
	};
</script>
    
<style type="text/css">
    #site-wrapper {
    position: 		relative;
	margin: 		0px auto;
    height: 		auto !important;
    height: 		100%;
    min-height: 	100%;
    }
     
    #blow-wrapper {
    clear:			both;
    }
     
    #footer-wrapper {
    position: 		absolute;
	margin: 		0px auto;
	background: 	#333;
    bottom: 		0px !important;
	width: 			100%;
    }
</style>
            

         
Rafi Benkual about 5 years ago

Hey Markus, thanks for sharing this!

Maximilian almost 5 years ago

Hi Markus,

can u explain how the html structure has to be?

Thanks!