从网页底部替换不同颜色的空白区

Question

我有fiddle我要用不同的背景颜色替换底部的空白区域。

我想要的background-color是#F5F5F5。

问题陈述：

我想知道我应该在fidle中的CSS代码中做出哪些更改，以便我能够用background color: #F5F5F5

替换底部的空白区域

我尝试从小提琴中将margin: 0 auto 100px;更改为margin: 0 auto 0;但由于某些原因，我仍然在网页底部的空白处。

Answer 1

1）从CSS中删除行： 第1行：// General CSS 第328行：// End General CSS 因为//不是有效的CSS注释，导致它们之后的第一个定义无效。

2）问题是.form类：

.form {
    background: #FFFFFF;
    width: 500px;
    height: 500px;
    margin: 0 auto 100px;
    box-sizing: content-box;
    padding: 50px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

行：margin: 0 auto 100px;创建一个100px的边距底部，这会创建空白空间。

相反，您可以在页面中添加填充底部：

.login-page {
    background-color: #BFBFBF;
    padding-top: 25px;
    padding-bottom: 100px;
}

3）对于较大的屏幕，其内容不会填满整个窗口的高度：

html, body {
    height:100%;
    background-color:green;
}

4）另一个问题，style.css在你的html中链接 BEFORE boostrap.css，重置了html和正文背景颜色，所以把你的style.css链接 AFTER < / strong> boostrap和我的解决方案将有效。

Answer 2

您可以在

上设置此背景颜色

html {
  background-color: #BFBFBF;
  height: 100%;
}

Answer 3

主要问题是.form类margin: 0 auto 100px;更改为margin: 0 auto;到.form，并将min-height: 100vh添加到.login-page类。 您可以在此处查看更新内容https://jsfiddle.net/nc2djn5p/241/

            .login-page{
                 min-height: 100vh
            }  
            .form {
                background: #FFFFFF;
                width: 500px;
                height: 500px;
                margin: 0 auto;
                box-sizing: content-box;
                padding: 50px;
                text-align: center;
                box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
            }