Question

我想在我的网站上垂直拉伸一个居中的背景图像。在那里工作完美是没有滚动条移动我居中的图像，但留下我的边距：0自动到位。现在我的内容与我的背景图像不符。

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上设置overflow: auto和#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解决。计算滚动条的宽度并将其添加到居中元素的偏移量中。

背景图像中心与边距对齐：0自动带滚动条

2 个答案: