身體內容由導航欄吃

Question

我已經尋找其他答案，應該回答這個問題，但我很難找到相關的幫助。

在我的網頁上，我有兩個導航欄，頂部和底部各一個。我的問題是我的「身體」被兩個導航欄吃掉了。我希望將內容縮放到每個導航欄的邊緣，而不是延伸到它們的邊緣。

The sample code can be seen in this fiddle:http://jsfiddle.net/qLjcao3p/

感謝所有幫助。

Answer 1

您的內容在頁眉和頁腳下顯示的原因是頁眉和頁腳具有固定的位置。渲染頁面時，不會考慮這些元素空間。因此，如果導航不在那裏，就會生成內容。

按照建議添加邊距可以通過提供額外的空白區域來解決問題，該空白區域可以讓您爲內容從頭到尾進行滾動。

你使用jQuery手機嗎？

Answer 2

在身體上添加一些邊距或填充將有所幫助。如果那是你正在尋找的。

// em or rem values recommended 
 
body { 
 
    margin:60px 0 40px 0; 
 
}

Answer 3

你只需添加margin到body像：

body{ 
    margin : 60px 0; // 60px for top and bottom side and 0 for left and right side 
} 

嘗試this例如

Answer 4

填充添加到您的容器的底部和頂部：

#bodyContent { 
padding:60px 0; 
} 

60px看起來不錯。這真的是你的Nav的高度。