javascript - 在页面加载和窗口调整大小时使用图像调整 div 大小

Question

http://bm-translations.de的标题根据窗口宽度更改其高度，但有时当我加载页面时，它看起来像这样:

这就是代码:

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

如何优化？

正如评论中所建议的那样，我尝试改为设置 CSS calc，但没有任何结果。我做错了什么？

我将父 #navigation 设置为 height:100% 并将 #banner 设置为

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

Answer 1

您应该使用 $( window ).on( "load", function() { ... }) 而不是只运行 $(window).trigger('resize' )在页面底部，如下:

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

从以下链接可以看出: 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.

由于您在导航中有图像，您应该等待整个页面加载以进行正确的 $('#navheader').height() 检测。