Make fill entire screen?

Question

I'm using a radial gradient as the background on my webpage, like so:

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

It works, but when the content does not fill the whole page the gradient is cut off. How can I make the <body> element fill the entire page, always?

That bit of css is applied to the body tag right? It works great for me in up-to-date Chrome http://jsfiddle.net/kdjFD/embedded/result/ . What browser are you testing? — LeRoy, Apr 19 '11 at 20:06
No, `body { width: 100%; height: 100%; }` doesn't work. I guess I have to apply it to `` too. — Ry-, Apr 20 '11 at 00:44
Don't use the old -webkit- syntax. Use the official W3C syntax — Tim Nguyen, Mar 08 '14 at 13:15
@TimNguyen: This question was asked three years ago, when there was no browser support for that. — Ry-, Mar 08 '14 at 14:58
related: https://stackoverflow.com/a/48503609/8620333 .. quite old as question but I don't really see an answer explaining the background propagation trick and why you only need `html{height:100%}` — Temani Afif, Jul 19 '19 at 14:56

score 273 · Accepted Answer · edited May 03 '14 at 23:28

273

html, body {
    margin: 0;
    height: 100%;
}

edited May 03 '14 at 23:28

Ry-

218,210
55
464
476

answered Apr 19 '11 at 20:13

capdragon

14,565
24
107
153

29

It seems that all it takes is `html { height: 100%; }` actually. – Ry- Apr 20 '11 at 00:47
35

Neither `html { height: 100%; }` nor `body { height: 100%; }` was enough for me (Opera included as a test) What worked best was `html, body { min-height: 100%; }` Using height instead of min-height left my background white w/o the background-color applied when I expanded some collapsible divs in the middle of my page. `min-height` fixed that. – Stephen P Mar 09 '13 at 01:03
1

Why is this issue happening only when using background : linear gradient and not with simple background – ASEN Jun 21 '15 at 17:16
@ASEN Did you ever figure out why that is? – lacy May 23 '16 at 23:16
7

If it's still not working for anyone just change `100%` to `100vh`. – PolymorphismPrince Feb 09 '19 at 03:39
2

I know this is nearly a 10 year old question, but this accepted answer only works if your page doesn't fill the screen. Since I was fetching dynamic content it may or may not fill the screen, so I had to set html to height: 100% and body to min-height: 100% to get the desired effect. – Moose Nov 05 '20 at 12:49
When I change the height of a contained textarea, the overall height of the body changes (becomes much less than full screen). – David Spector Jul 18 '23 at 13:15

jwatts1980 · Answer 2 · 2015-06-04T21:23:27.373

35

On our site we have pages where the content is static, and pages where it is loaded in with AJAX. On one page (a search page), there were cases when the AJAX results would more than fill the page, and cases where it would return no results. In order for the background image to fill the page in all cases we had to apply the following CSS:

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

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

height for the html and min-height for the body.

edited Jun 04 '15 at 21:23

answered Jun 13 '13 at 18:58

jwatts1980

7,254
2
28
44

2

Neither of them need `width: 100%;`. – Ry- Aug 10 '13 at 16:10
3

because of display:block nature – Valen Jan 30 '15 at 14:51
also `margin: 0;` is enough, no need to specify which unit you use zero of – KameeCoding Oct 24 '18 at 19:39
For me this almost works, but is a bit too high. – David Spector Jul 18 '23 at 13:21

score 24 · Answer 3 · edited May 23 '17 at 12:18

As none of the other answers worked for me, I decided to post this as an answer for others looking for a solution who also found the same problem. Both the html and body needed to be set with min-height or the gradient would not fill the body height.

I found Stephen P's comment to provide the correct answer to this.

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

background filling body height

When I have the html (or the html and body) height set to 100%,

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

background not filling body

For me, this is a bit too high; the body overflows the page, in Chrome. — David Spector, Jul 18 '23 at 13:24

score 12 · Answer 4 · answered Nov 24 '11 at 12:53

12

I had to apply 100% to both html and body.

answered Nov 24 '11 at 12:53

htrufan

121
1
2

Rtzoor · Answer 5 · 2020-10-20T15:08:45.080

The goal is to make the <body> element take up the available height of the screen.

If you don't expect your content to take up more than the height of the screen, or you plan to make an inner scrollable element, set

body {
  height: 100vh;
}

otherwise, you want <body> to become scrollable when there is more content than the screen can hold, so set

body {
  min-height: 100vh;
}

this alone achieves the goal, albeit with a possible, and probably desirable, refinement.

Removing the margin of <body>.

body {
  margin: 0;
}

there are two main reasons for doing so.

<body> reaches the edge of the window.
<body> no longer has a scroll bar from the get-go.

P.S. if you want the background to be a radial gradient with its center in the center of the screen and not in the bottom right corner as with your example, consider using something like

body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>test</title>
</head>
<body>
</body>
</html>

Mike Wright · Answer 6 · 2016-07-25T18:32:04.877

4

Try using viewport (vh, vm) units of measure at the body level

html, body { margin: 0; padding: 0; } body { min-height: 100vh; }

Use vh units for horizontal margins, paddings, and borders on the body and subtract them from the min-height value.

I've had bizarre results using vh,vm units on elements within the body, especially when re-sizing.

edited Jul 25 '16 at 18:32

answered Jul 25 '16 at 18:11

Mike Wright

49
1
2

score 4 · Answer 7 · answered Dec 25 '17 at 23:52

4

I think the largely correct way, is to set css to this:

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

answered Dec 25 '17 at 23:52

Martin Wantke

4,287
33
21

The important parts of this are the same as the answer accepted six years ago, sorry. – Ry- Dec 26 '17 at 09:44

score 2 · Answer 8 · answered Oct 17 '18 at 08:45

I tried all the solutions above and I'm not discrediting any of them, but in my case, they didn't work.

For me, the problem was caused because the <header> tag had a margin-top of 5em and the <footer> had a margin-bottom of 5em. I removed them and instead put some padding (top and bottom, respectively). I'm not sure if replacing the margin was an ideal fix to the problem, but the point is that, if the first and last elements in your <body> has some margins, you might want to look into it and remove them.

My html and body tags had the following styles

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }

Vrokipal · Answer 9 · 2018-10-22T14:57:34.883

2

If you have a border or padding, then the solution

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}

produces the imperfect rendering

To get it right in the presence of a border or padding

use instead

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}

as Martin pointed out, although overflow: hidden is not needed.

(2018 - tested with Chrome 69 and IE 11)

edited Oct 22 '18 at 14:57

answered Oct 22 '18 at 14:23

Vrokipal

784
5
18

Your answer is only relevant to you, and because you added a border to the `body` tag. Without that border, the `body` will fill exactly 100% of the viewport, you can see that with a background color for example. The correct answer to that question was accepted 7 years ago is still valid. – Niss Oct 22 '18 at 14:42

Make fill entire screen?

9 Answers9

Linked

Related