Rails 6应用CSS渐变背景无法铺满全屏问题求助

可直接落地的解决方案（仅登录页生效，不影响其他页面） #

推荐用最稳妥的视口单位方案，不需要依赖父元素高度，也不用改全局布局：

• 修正你原有CSS的错误，替换为以下代码：

.login-bg {
  width: 100%;
  min-height: 100vh; /* 直接取视口高度，不需要父元素设置高度 */
  margin: 0;
  padding: 0;
  background: rgb(236,240,241);
  background: -moz-linear-gradient(180deg, rgba(236,240,241,1) 0%, rgba(35,74,89,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(236,240,241,1) 0%, rgba(35,74,89,1) 100%);
  background: linear-gradient(180deg, rgba(236,240,241,1) 0%, rgba(35,74,89,1) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed; /* 防止滚动时渐变重复或截断 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ecf0f1",endColorstr="#234a59",GradientType=1);
}

• 在app/views/devise/sessions/new.html.haml的最外层容器上添加login-bg类即可，不需要修改html、body的全局样式。

如果你想让背景直接挂载到body上避免多余嵌套，可以在Rails全局布局app/views/layouts/application.html.haml的body标签上加动态类支持：

%body{ class: yield(:body_class) if content_for?(:body_class) }

• 在登录页new.html.haml顶部添加：

- content_for :body_class, 'login-bg'

• 把上面CSS的选择器改成body.login-bg即可，效果完全一致。

问题根源 #

这个问题和Rails框架本身没有任何关系，完全是CSS写法问题+默认样式干扰导致的：

• 你的原有CSS存在低级拼写错误：heigh: 100% 应为 height: 100%，该属性完全没生效。
• 百分比高度height: 100%的生效前提是所有层级的父元素都显式设置了height值，你直接给内层div设100%高度时，外层的body、html标签默认没有设置高度，百分比找不到参考基准，最终高度只会被内部内容撑开，就会出现渐变只占内容区域的问题。
• CSS渐变本质是背景图的一种，默认会沿元素平铺，你没有设置background-repeat: no-repeat，当元素高度计算小于视口高度时，就会出现渐变在底部重复的问题。
• Bootstrap 3默认给body标签添加了margin，你如果直接给body/html加样式没有重置margin，就会出现边缘留白、渐变位置偏移的问题。

你在普通HTML页面测试时代码能正常运行，大概率是测试时写的demo结构简单，要么内容刚好撑满一屏，要么你无意识给父元素设置了高度，放到Rails项目里因为布局嵌套层级多、有Bootstrap默认样式干扰，问题就暴露了。

之前尝试失效的原因 #

• 给顶部元素加.login-bg类失效：拼写错误+父元素无高度基准，元素高度被内容撑开。
• 给html、body标签加样式失效：没有重置默认margin/padding，没有给渐变设置禁止重复，且html标签默认高度由内容决定，100%高度不生效。
• 直接给html标签加样式失效：html标签的父节点是document节点，没有显式设置高度的前提下，百分比高度无参考值，无法铺满视口。

内容的提问来源于stack exchange，提问作者Scott Milella