Question

我正在尝试使用如下所示的渐变来填充我的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%;
}

非常感谢任何帮助！

Answer 1

将身体身高设置为100％而不是最小身高，然后将.gradient元素设置为身高100％

见下文

＆＃13;

${HOME}/.ssh/config

＆＃13;

Bad owner or permissions on /home/user1/.ssh/config

＆＃13;

然而，更简单的方法是设置您将渐变类置于其上的元素以使其具有100vh：

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);
}

这会将其设置为视口的（浏览器）高度的100。 https://s3.amazonaws.com/codenameone-build-response/d5f3c0c7-71a3-4a17-9f19-1c4e8fb3903d-1523988845519-error.txt

Answer 2

看起来你正确的路径。

您还可以考虑使用vw和vh测量而不是%测量，这些测量将对视口流畅，您不需要显式设置HTML的高度也是100％（这可能导致后来的溢出问题）。

以下是有关vh＆amp; vw测量：

https://css-tricks.com/fun-viewport-units/

body {
    min-height: 100vh; /* min-height vh can have problems in older IE browsers! */
    background: #43cea2;
    background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
    background: linear-gradient(to right, #185a9d, #43cea2);
}

简单＆amp;立即回答你可以参考这个：

这是一个小提琴，可以看看并搞乱：

https://fiddle.jshell.net/pfk9yvz9/11/

以下是一些有效的代码：

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="gradient">
    <p>
      <span>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. </span>
      <span>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. </span>
      <span>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. </span>
    </p>
  </body>
</html>

style.css（在<head>中链接）

html {
  margin: 0px;
  height: 100%;
  width: 100%;
}

body {
  margin: 0px;
  min-height: 100%;
  width: 100%;
}

.gradient {
  background: #43cea2;
  background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
  background: linear-gradient(to right, #185a9d, #43cea2);
}

p {
  padding: 25px;
  margin: 0;
}

p span {
  display: block;
  margin: 15px 0;
}

使用Bootstrap和Rails使HTML填充整个垂直空间？

2 个答案: