如何根据Navbar高度计算body填充

Question

创建ASP.NET MVC应用程序时，它会自动生成默认的Navbar布局，左上方有几个菜单项，右上角的"登录"菜单项。

默认情况下，页面的内容始于Navbar后面。正如许多帖子所建议的那样，罪魁祸首是navbar-fixed-top类，并且必须在特定网站的CSS文件中为body添加padding-top。

我选择了适当的顶填充尺寸，并且似乎可以很好地工作。

当您开始缩短桌面上的浏览器宽度时，问题就会发生。在某一时刻，"登录"菜单项将滚动到下一行。我指定的填充尺寸不再有效。

我想知道是否有一种方法可以根据Navbar高度动态设置填充尺寸。或者，也许有一种方法可以根据NAVBAR的当前状态定义两个不同的填充大小？希望我可以在我的cos.css文件或主布局文件中应用技巧，这样我就不需要修改每个页面。问候。

Answer 1

这是我解决相同问题的代码，我不确定是否保留它，也许对您有帮助。

(function ($) {
    var lastNavBarHeight = 100;
    checkSize(); // init
    $(window).resize(checkSize);
    // changes size of padding to the nav.navbar when responsive changes are fired
    function checkSize() {
        var navHeight = $("nav.navbar").height();
        if (navHeight !== lastNavBarHeight) {
            $("body").css("padding-top", navHeight + "px");
            lastNavBarHeight = navHeight;
        }
    }
}(jQuery));