我正在尝试用如下所示的渐变填充我的 Rails 网页的背景:
.gradient {
background: #43cea2;
background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
background: linear-gradient(to right, #185a9d, #43cea2);
}
渐变效果完美，但是正文的内容并没有填满屏幕的整个垂直空间，因此渐变背景在页面中途被切断。
我已经在 Stack Overflow 上引用了其他帖子，例如 this one ，但这些答案似乎都没有帮助。
在我的 application.scss 中添加这些行似乎根本没有任何效果:
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
如有任何帮助，我们将不胜感激!
最佳答案
将 body height 设置为 100% 而不是最小高度，然后将 .gradient 元素设置为 100% 高度
见下文
html {
height: 100%;
}
body {
height: 100%;
}
.gradient {
height: 100%; /*If you're placeing this class on the body then remove this as it is redundent*/
background: #43cea2;
background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
background: linear-gradient(to right, #185a9d, #43cea2);
}<div class="gradient"></div>然而，更简单的方法是将要放置渐变类的元素设置为 100vh:
.gradient {
...
height: 100vh
}
这会将其设置为视口(viewport)(浏览器)高度的 100。 Here is some information on viewport units
关于html - 使用 Bootstrap 和 Rails 让 HTML <body> 填充整个垂直空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49884188/