javascript - Content under fixed header and navbar when scrolling

Question

I want the header and navbar to be fixed when scrolling on my site. I can make these both fixed, however the content in the #container div doesn't appear under them.

I currently use the following to make the content of my site appear below the header but not sure how to calculate the margintop for the #header AND #navbar ids.

#header{
    width:100%;
    position:fixed;
    top:0px;
}

#navbar{
    width:100%;
    height:50px;
    margin:auto;
    position:fixed;
    top:120px;
}


$(document).ready(function () {
                    $('#container').css('marginTop', $('#header').outerHeight(true) );

                });

Thanks for your help.

Answer 1

 $(document).ready(function () { $('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) ); });