无法弄清楚为什么页面有滚动条答案

【问题标题】：Cannot figure out why page has scrollbar无法弄清楚为什么页面有滚动条
【发布时间】：2014-02-20 20:56:53
【问题描述】：

我遇到了一个简单的单页网站问题。可以找到here。我尝试制作小提琴，但无法重现问题。

如您所见，会出现一个滚动条（在 Chrome 和 FF 上测试）。但我找不到它的来源/来源！我已经尝试了很多 overflow: hidden（我想避免）和 cleafixes，但没有任何帮助。谁能找到问题所在？

编辑：我知道身体 100% 的高度对其有影响，但这 不应该 是个问题。正文应该和 html 一样高。但是由于某种原因，body 有一个 margin-top，或者 html 有一个 padding-top。而且我不知道是什么原因造成的。

【问题讨论】：

标签： css scrollbar

【解决方案1】：

问题是您将主体设置为 100% 的高度，并且在您的 #main-wrapper 中设置了 20px 的边距（顶部和底部），请记住这一点，因为您的主体标签是main-wrapper，它现在的上边距为 20px，因此最终高度为 100% + 20px，这就是滚动条的原因。要解决这个问题，只需删除 100% 高度或将“margin: 20px auto”替换为“margin: 0 auto; padding: 20px 0”。

【讨论】：

【解决方案2】：

您可以从正文或 HTML 中删除 height:100%。

【讨论】：

查看我的编辑。我知道这是一种可能性，但这不是问题——所以我宁愿不这样做。

【解决方案3】：

似乎你在身体上的“身高：100%”导致它创建了那个滚动条；尝试删除它。

【讨论】：

查看我的编辑。我知道这是一种可能性，但这不是问题——所以我宁愿不这样做。
实际上，这是问题所在，因为 body 占用了 100% 的父元素，即 html，而您的 #main-wrapper 上有一个边距，它推动了其余的你的文件下来。实际上，这会导致你的变大，最后，身体需要进一步下降以适应 100% 的高度。查看webdesign.about.com/od/csstutorials/f/… 和stackoverflow.com/questions/3557199/… 以更好地了解为什么会出现该问题