如何根据导航栏高度计算正文填充？

Question

创建 ASP.NET MVC 应用程序时，它会自动生成默认导航栏布局，左上角有几个菜单项，右上角有一个“登录”菜单项。

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

我选择了一个合适的顶部填充尺寸，它似乎工作得很好。

当您开始缩短桌面上浏览器的宽度时，就会出现问题。在某一时刻，“登录”菜单项会滚动到下一行。我指定的填充大小不再有效。

我想知道是否有办法根据导航栏高度动态设置填充大小。或者，也许有一种方法可以根据导航栏的当前状态定义两种不同的填充大小？希望我可以在我的 site.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));