比一个屏幕长的居中 CSS 页面比较短的页面显示在左侧 5px~ - 我该如何阻止这种情况？

Question

这个问题已经困扰我一段时间了，我尝试过研究它，但到目前为止我刚刚找到了一些网站告诉我如何将事物居中，但这不是问题。问题是，虽然 #content 看起来像是居中的，但当页面占据多个屏幕时，它会导致 #content 显示在其高度小于一屏幕时出现的位置左侧约 5px 处。有没有办法解决这个问题，而不强迫我的较短页面到达底部屏幕或超出屏幕？

这是我集中内容的方式：

body {
    margin: 0;
    padding: 0;
}

#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}

我承认那里还有几个 div，但我不认为这与这个问题真正相关......

Answer 1

@asc99c 是正确的。

滚动条导致了您的问题。

当它出现时，就会推翻一切。

要解决这个问题（如果必须的话），您可以使页面高度超过 100%。类似于

body, html{
    height:100%;
}

div{
    height:101%;
}

以 div 为主要内容 div 的内容。

示例： http://jsfiddle.net/jasongennaro/7NYnS/

Answer 2

以下 CSS 将强制显示垂直侧边栏，即使在比视口高度短的页面上也是如此。这将防止您注意到的水平移动。

html {
  overflow: -moz-scrollbars-vertical; 
  overflow-y: scroll;
}

通过 http://egilhansen.com/2007/03/28 /css-trick-always-show-scrollbars/