正文内容被导航栏吃掉

Question

我已经在 SO 上寻找应该回答问题的其他答案，但我很难找到相关帮助。

在我的网页上，我有两个导航栏，顶部和底部各一个。我的问题是我的 "body" 被两个导航栏吃掉了。我更愿意将内容缩放到每个导航栏的边缘，而不是延伸到它们中。

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

感谢大家的帮助。

Answer 1

在正文中添加一些边距或填充会有所帮助。如果这就是您要找的。

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

Answer 2

您只需将 margin 添加到 body，例如：

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

尝试this示例

Answer 3

在容器的底部和顶部添加填充：

#bodyContent {
padding:60px 0;
}

60px 看起来不错。那真是你导航的最高点。

Answer 4

您的内容显示在页眉和页脚下的原因是页眉和页脚的位置固定。呈现页面时不会考虑这些元素 space。所以内容将被生成，就好像导航不存在一样。

按照建议添加边距可以解决问题，方法是提供额外的白色 space，这样您就可以从头到尾滚动内容。

您使用 jQuery 手机吗？

Body content eaten by navigation bar