Question

我目前正在设计我的婚礼网站，但我遇到了一个我正在努力解决的错误。我只使用HTML和CSS。这个想法是在滚动和固定背景之间交替，它的工作非常出色。我为自己感到骄傲。我已经复制了下面的CSS。（我把它清理干净了，当我复制和粘贴时，它有点混乱。）

http://mattvwhittle.com/WeddingWebsite/index.html

问题是：如果你滚动那么，右边会有一大块空白区域。

有什么建议吗？

* {
  margin: 0;
  padding: 0;
}
body, html, main {
  height: 100%;
  width: 100%;
}
.fixed-bg {
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
#bg-fixed-1 {
  background-image: url("images/skyline.jpg");
}
#bg-fixed-1 h1 {
  position: relative;
  top: 130px;
  left: 80px;
}
#bg-fixed-1 h2 {
  position: relative;
  top: 130px;
  left: 140px;
}
#bg-scroll-2 {
  background-color: #FCFBF7;
}
#bg-fixed-3 {
  background-image: url("images/bandw.jpg");
}
#bg-scroll-4 {
  background-color: #FCFBF7;
}
#bg-fixed-5 {
  background-image: url("images/cover.jpg");
}
#bg-scroll-6 {
  background-color: #FCFBF7;
}
.scrolling-bg {
  min-height: 100%;
}

Answer 1

你的h1和h2s正在造成这种情况。如果您检查它们，您将看到它们将页面推出。

有几种选择。我要用左边的填充或者设置显示替换左边：内联。

#bg-fixed-1 h1 {
  position: relative;
  top: 130px;
  padding-left: 80px;
}

#bg-fixed-1 h2 {
  position: relative;
  top: 130px;
  padding-left: 140px;
}

为什么右边有空白区域？

1 个答案: