改變導航欄-固定頂部導航欄靜態頂創建上述頭

當改變從導航欄-固定頂部的標題類Navbar的靜態頂部它會在標題上創建一個80像素的空白區域。當然，我可以通過將margin-top設置爲-80px來解決這個問題，但是我想知道是否有人解釋了爲什麼會出現這種情況，或者有上述更好的解決方法。

下面是HTML的問題：

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

預先感謝您！

編輯：你們都搖滾！感謝您的快速回復，解釋和修復。這些簡單的事情會讓你陷入瘋狂。大聲笑。

2014-08-28 Cory

林不知道即時看到任何空格。更準確地說，你在使用什麼瀏覽器 – 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時，您的內容實際上會在導航欄下方滑動。當你有一個固定的導航欄時，你需要爲它留下一個間隔，這樣你的內容開始在導航欄下方，而不是真正隱藏在它下面。

如果您從您的身體標記中刪除填充，那麼您應該很好地使用靜態導航欄。

2014-08-28 14:59:05 GifCo

body元素有80px的padding-top應用於它。刪除它，它將解決問題。

當導航欄被固定時，它不在正常的文檔流中，導航欄忽略了填充（但其餘的非固定元素被填充按下以便爲固定導航欄騰出空間，這是padding-top:80px;被應用到身體的全部點），但是當它不固定時，導航欄將成爲文檔流的一部分，並被身體的填充按下。

2014-08-28 14:59:07 Schmalzy

我不會說填充被忽略。而是固定的導航欄忽略填充。它自我填充仍然存在，所有其他元素都尊重它。 – 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

2014-08-28 15:01:37 Benjamin

他正在尋求探索它爲何存在的原因。他已經有了一個簡單的修復工作。 – GifCo 2014-08-28 15:06:58

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

回答