javascript - 背景图像中心与边距对齐：0 auto with scroll-bar

Question

我想在我的网站上垂直拉伸居中的背景图像。当没有滚动条移动我的居中图像时完美工作，但保留我的 margin: 0 auto 到位。现在我的内容与我的背景图像不一致。

Html, Body
{
  width: 100%;
  height: 100%;
  background: url('../Images/page-bgr-top.png')
              center top repeat-x;
  overflow: auto;
}

Body {
  background: url('../Images/page-bgr-content.png')
              center top repeat-y;
  display: block;
  overflow: scroll;
}

#Main-Page
{
  width: 900px;
  margin: 0 auto;
  height: 100%;
  display: none;
}

background-image通过设置and overflow: autoon也尝试了不同的解决方案，并#Main-Page在我的网站上获得了一些讨厌的滚动条。

Answer 1

这是因为您在 html 和 body 中添加了太多的 css

 Html, Body
        {
          /*width: 100%;*/ removed 
          height: 100%;
          background: url('../Images/page-bgr-top.png')
                      center top repeat-x;
          /*overflow: auto;*/ removed 
        }

        Body {
          background: url('../Images/page-bgr-content.png')
                      center top repeat-y;
          display: block;
          /*overflow: scroll;*/ removed 
        }

        #Main-Page
        {
          width: 900px;
          margin: 0 auto;
          height: 100%;
          display: none;
        }

Answer 2

用javascript解决。计算滚动条的宽度并将其添加到居中元素的偏移量。