改变导航栏-固定顶部导航栏静态顶创建上述头

问题描述：

当改变从导航栏-固定顶部的标题类Navbar的静态顶部它会在标题上创建一个80像素的空白区域。当然，我可以通过将margin-top设置为-80px来解决这个问题，但是我想知道是否有人解释了为什么会出现这种情况，或者有上述更好的解决方法。

下面是HTML的问题：

<header id="header" class="navbar navbar-inverse navbar-fixed-top" role="banner">

预先感谢您！

编辑：你们都摇滚！感谢您的快速回复，解释和修复。这些简单的事情会让你陷入疯狂。大声笑。

林不知道即时看到任何空格。更准确地说，你在使用什么浏览器 – Benjamin 2014-08-28 14:55:35

我试过不同的浏览器，以及对Chrome浏览器的所有'Chrome'，'firefox'和'safari'都知道'ie' – Benjamin 2014-08-28 14:58:59

。应该提到这一点。此外，目前它被设置为navbar-fixed-top，所以空白不在那里。如果您使用开发人员工具将其更改为navbar-static-top，您将会看到它。 – Cory 2014-08-28 14:59:20

答

所以这是因为您的整个页面的身体标记具有80px的填充。

<body class="page page-id-381 page-template-default">

林不知道如果你添加它或不。但是，如果该身体标记没有80px填充，那么当您将其设置为navbar-fixed-top时，您的内容实际上会在导航栏下方滑动。当你有一个固定的导航栏时，你需要为它留下一个间隔，这样你的内容开始在导航栏下方，而不是真正隐藏在它下面。

如果您从您的身体标记中删除填充，那么您应该很好地使用静态导航栏。

答

body元素有80px的padding-top应用于它。删除它，它将解决问题。

当导航栏被固定时，它不在正常的文档流中，导航栏忽略了填充（但其余的非固定元素被填充按下以便为固定导航栏腾出空间，这是padding-top:80px;被应用到身体的全部点），但是当它不固定时，导航栏将成为文档流的一部分，并被身体的填充按下。

我不会说填充被忽略。而是固定的导航栏忽略填充。它自我填充仍然存在，所有其他元素都尊重它。 – GifCo 2014-08-28 15:05:46

@GifCo同意了，冗长的解释永远不是我的强项; – Schmalzy 2014-08-28 15:11:18

哈哈我听到你的声音！当你写下来的时候，头脑中有什么感觉有时候看起来像是胡言乱语！我做了很多！ – GifCo 2014-08-28 15:24:03

答

我不知道你是否这样做了意图，但是当你使用fixed元素时，它会占用整个宽度和浮动顶部的内容，除非你给它们z-index，因为你的标题位于下面的内容之上你的头让它们出现在padding top下面会帮助你实现它。

删除padding-top:80px;从body

他正在寻求探索它为何存在的原因。他已经有了一个简单的修复工作。 – GifCo 2014-08-28 15:06:58

@GifCo和那个原因 – Benjamin 2014-08-28 16:23:20