Make HTML fill entire vertical space using Bootstrap and Rails?

Question

I'm trying to fill the background of my rails webpage with a gradient that looks like this:

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

The gradient works perfectly, however, the content of the body does not fill the entire vertical space of the screen, so the gradient background gets cut off half-way down the page.

I've already referenced other posts on Stack Overflow like this one, but none of those answers seemed to help.

Adding these lines in my application.scss doesn't seem to have any effect at all:

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

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

Any help would be greatly appreciated!

score 2 · Accepted Answer · answered Apr 17 '18 at 18:30

Set the body height to 100% not the min-height and then set your .gradient element to height 100%

See below

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>

An easier method however would be to set the the element that you're placing gradient class on to have it's 100vh:

.gradient {
...
height: 100vh
}

This is will set it to 100 of the viewport's (browser) height. Here is some information on viewport units

Thanks! That's exactly what I was looking for! – Austin Larson Apr 17 '18 at 18:57 — Austin Larson, Apr 17 '18 at 18:57

score 1 · Answer 2 · answered Apr 17 '18 at 18:32

Looks like you're on the correct path.

You could also consider using vw and vh measurements rather than % measurements which will be fluid to the viewport and you won't need to explicitly set the height of HTML to 100% either (which can cause overflow issues down the road later).

Here is some info on vh & vw measurements:

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

For a simple & immediate answer you can refer to this:

Here is a fiddle to look at and mess around with:

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

Here is some working code:

<!-- 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 (linked in <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;
}

Make HTML fill entire vertical space using Bootstrap and Rails?

2 Answers2