在页面加载和窗口调整大小时使用图像调整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/

  

在文档准备好之前，页面无法安全操作。＆＃34;码   包含在$( document ).ready()内的只会在页面上运行一次   文档对象模型（DOM）已准备好执行JavaScript代码。   代码包含在$( window ).on( "load", function() { ... })中   将在整个页面（图像或iframe）（而不仅仅是DOM）准备就绪后运行。

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