导航栏吃掉的正文内容答案

【问题标题】：Body content eaten by navigation bar导航栏吃掉的正文内容
【发布时间】：2016-02-11 21:07:38
【问题描述】：

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

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

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

感谢大家的帮助。

【问题讨论】：

【解决方案1】：

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

按照建议添加边距将通过提供额外的空白来解决问题，让您可以从头到尾滚动内容。

您在使用 jQuery 移动版吗？

【讨论】：

【解决方案2】：

在正文上添加一些边距或内边距会有所帮助。如果这就是你要找的。p>

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

【讨论】：

【解决方案3】：

您只需将margin 添加到body 即可：

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

试试this 示例

【讨论】：

【解决方案4】：

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

#bodyContent {
padding:60px 0;
}

60px 看起来不错。这确实是您导航的最高点。

【讨论】：