5

现在 [几乎] 一切都基于 off rems，导航栏似乎有一些时髦的高度属性。一方面，导航栏高度是可变的，而填充是顶部和底部的静态 8px。

由于导航栏的伪动态特性，简单地将 body 的 padding-top 设置为 50px 不再有效。如果用户改变他们的字体大小，栏的高度将不再是 50px。

有没有人想出如何在滚动到页面顶部时为正文提供适当数量的填充以使其恰好位于导航栏下方？

如果必须使用 jQuery 来实现这一点，这似乎是一种回归，但也许这是唯一的方法。

示例代码：

body {
  padding-top: 54px;
  background-color: blue;
}

div.container-fluid {
  background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top navbar-dark bg-inverse container">
  <a href="www.google.com" class="navbar-brand">google.com</a>
</nav>

<div class="container-fluid">
  <p>I am content that is getting overlapped by the navbar!</p>
</div>

请注意，条形图在某些字体大小处是如何重叠的，而在其他大小处则存在间隙。在 Mac OS X 上，您可以使用 command+minus 和 command+plus 更改字体大小

编辑：我在 bootstrap 4 github 页面上提出了一个问题。该错误已得到确认，但它可能超出范围，因为它们通常不支持缩放效果。

4

1 回答 1

0

我可以确认您的 chrome 问题。缩放时导航栏的计算高度会发生变化。上述结果导致缩放级别为 125% 和 175%，如下所示： 在此处输入图像描述

对于 125%，导航栏的计算高度 = 53.6 (37.6 + 8*2) 而不是 54。可能相关：Chrome 舍入媒体查询 em 单位是否错误？

于 2015-12-08T23:55:02.373 回答