gpt4 book ai didi

html - 使用 Bootstrap 和 Rails 让 HTML 填充整个垂直空间?

转载 作者:太空宇宙 更新时间:2023-11-04 01:17:18 24 4
gpt4 key购买 nike

我正在尝试用如下所示的渐变填充我的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com