用页面加载图像和窗口调整大小来调整div的大小

Question

The header of http://bm-translations.de changes its height depending on window width but sometimes when I load the page it looks like that:

Thats the code:

//navheader responsive height   
$(window).on('resize', function(){
    $("#banner").css("height",$('#navheader').height()+30);
}).trigger('resize'); //on page load

How to optimize it?

As suggested in comments I tried to set CSS calc instead, but without any result. What am I doing wrong?

I set the parent #navigation to height:100% and #banner to

height: -moz-calc(100% + 30px);
height: -webkit-calc(100% + 30px);
height: calc(100% + 30px);

Answer 1

You should use $( window ).on( "load", function() { ... }) instead of just run $(window).trigger('resize') at the bottom of the page, as follows:

$(window).on("load", function() {
     $(window).trigger('resize');
})

As you can see from the following link: https://learn.jquery.com/using-jquery-core/document-ready/

A page can't be manipulated safely until the document is "ready." Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

As you have images in navigation, you should wait the full page load for correct $('#navheader').height() detection.