javascript - 内容的 padding-top 基于固定标题的高度

Question

我正在使用固定的 header 进行布局，其中包含一个主 nav 和另一个名为 #sub_nav 的导航。问题是 #sub_nav 有很多元素可供选择，所以当我减小浏览器的宽度时，最后一个元素会换行，一部分内容会隐藏在灵活的标题后面。

这是一个例子:

这里是jsfiddle

我想知道是否有 CSS/JS 解决方案。我也接受 jquery 解决方案。

如果图像令人讨厌，我深表歉意，但我希望你能理解我想要解决的问题。

Answer 1

[更新] 因为标题是固定的，所以它重叠在主要内容之上。当#sub_nav 高度大于实际高度时，您需要使用 jquery 来增加#mid 的顶部填充。尝试这样的事情:

$(document).ready(function(){

    var subNav = $("#sub_nav");
    var main = $("#mid");

    if(subNav.height() > 25){
        main.css({"padding-top": "220px"});
    }
    else{
        main.css({"padding-top": "190px"});
    }
    $(window).resize(function(){

        if(subNav.height() > 25){
            main.css({"padding-top": "220px"});
        }
        else{
            main.css({"padding-top": "190px"});
        }

    }); 

});