set padding top of div to minus the height of the header

Question

I can set padding to my div with

<div id="Products" style="background-color:red; width:100%; padding-top:70px">
</div>

but instead of using 70px is it possible to use a value I have generated from the size of the header...

<script>
    function resizeDiv() {
    var headerHeight = $('header').outerHeight();
    }
</script>

So set top padding to headerHeight....is this done in css or js?

Answer 1

Use the css() function.

You can create a function that runs on load and (if you want) on resize if the header changes it's height:

var setHeight = function() {
  var top = $('header').outerHeight();
  $('#products').css({'padding-top': top + 'px'});
}

$(window).load(function() {
  //On load you can be sure that the target element has been loaded 
  //(except if it is loaded from an ajax call)
  setHeight();
});

$(window).resize(function() {
  setHeight();
});