Window resize

How to dynamically resize margins based on window size.

Resource

resize event

Sample code

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>

<script type=”text/javascript”>

//Initial load of page
$(document).ready(sizeContent);

//Every resize of window
$(window).resize(sizeContent);

//Dynamically assign height to .top and margin-bottom
function sizeContent() {
var newHeight = $(window).height() * .015 + “%”;
var footerHeight = $(window).height() * .025 + “%”;
$(“#vertical”).css(“top”, newHeight);
$(“.content-footer”).css(“marginBottom”, footerHeight);
}

</script>