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

Question

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

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

我选择了一个合适的顶部内边距大小，它看起来效果很好。

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

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