如何基于导航栏高度计算身体填充？

创建ASP.NET MVC应用程序时，它会自动生成一个默认导航栏布局，其左上角有几个菜单项，右上角有一个“登录”菜单项。如何基于导航栏高度计算身体填充？

默认情况下，页面内容在导航栏后面开始。正如许多帖子所建议的，罪魁祸首是类navbar-fixed-top和一个必须添加padding-top为body风格在您的站点特定的CSS文件。

我选择了一个合适的顶部填充尺寸，它看起来很完美。

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

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

来源

2017-09-03 Peter

默认MVC模板附带'padding-top：50px'到主体。即使它在“sm”（片剂）尺寸范围内，这对我来说也很好。 – adiga

这是我的代码来解决同样的问题，我不知道如果我保留它，也许它可以帮助你。

(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));

来源

2017-09-03 09:03:27

谢谢你的帮助。我已经想出了一个更清洁的方式来使用JavaScript来解决这个问题。很快就会发布我的解决方案。问候。 – Peter

如何基于导航栏高度计算身体填充？

回答

相关问题