导航栏吃掉的身体内容

Question

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

在我的网页上，我有两个导航栏，顶部和底部各一个。我的问题是我的“身体”被两个导航棒吃掉了。我希望将内容缩放到每个导航栏的边缘而不是延伸到它们中。

foo http://jsfiddle.net/qLjcao3p/

感谢您的帮助。

Answer 1

在身体上添加一些边距或填充将有所帮助。如果这就是你要找的东西。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的内容显示在页眉和页脚下的原因是页眉和页脚具有固定位置。渲染页面时不考虑这些元素空间。因此，将生成内容，就好像导航器不在那里一样。

根据建议添加边距可以通过提供额外的空白区域来解决问题，这样可以让您从内到外滚动内容。

您使用的是jQuery mobile吗？

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看起来很好。这真的是你的导航的高度。