我的代码出了什么问题？我的背景并不涵盖整页

Question

我的背景图片似乎并未覆盖整个页面。 Link to site

如下图所示，底部有一个黑条。

有人可以查看我的代码并告诉我我做错了什么吗？我尝试了很多东西。

所有代码均可在GitHub repository上找到。

正在使用的CSS属性：

background-image: url(img/sc1.png);
padding-top: 40px;
background-position: center center;
background-size: cover;
background-attachment: fixed;
min-height: 100vh;
height: auto;
width: 100vw;
max-width: 100%;

Answer 1

在.desc班级设置的保证金底部为0，因此请更改margin:40px auto

.desc {
    /* margin bottom to 0 */
    margin: 40px auto 0;
    padding: 20px;
    color: #ecf0f1;
    font-size: 2vw;
    background-color: rgba(19, 15, 14, 0.6);
    width: 80%;
}

并在.item类设置填充底部，以保持.desc的透明黑框与页面底部之间的空间：

.item{
    ...
    padding-bottom: 40px;
    ...
}

Answer 2

变化

.item {
   height: auto;
}

到

.item {
   height: 100%;
}

Answer 3

你应该在身体上声明背景图像。 http://www.w3schools.com/cssref/pr_background-image.asp 或者添加到body class="s1"并将.s1更改为

    .s1 {
        background-image: url(img/sc1.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

然后在课程.item display:none;

中删除

然后你需要更改.desc类，因为它的边距和填充会创建另一个黑条。

编辑：只需将padding:0px;放入.desc课程即可。 不要忘记将html文件中的div class="item s1"更改为 div class="item"

Answer 4

我知道这不是解决此问题的正确方法，但如果您将背景应用于html元素而不是该项元素，则黑条会消失。

html {
  height: 100%;
  min-height: 100%;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-image: url(img/sc1.png);
}

Answer 5

您已将背景设置为与视口的高度相匹配，但您的内容已超出视口高度。如果你临时删除了desc，你将能够见证这种情况。 desc还有一个20px的填充物。底部无需20px。尝试填充：15px 15px 5px;

如果您只想使用视口，则需要删除滚动条。如果要保留滚动条，则需要删除vh高度设置。