Login/Register
Make <body> fill entire screen?
Asked Answered
Solved htmlcssradial-gradients
M

9

177

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?

Marasmus answered 19/4, 2011 at 19:55 Comment(6)
And body { width: 100%; height: 100%; } doesn't work? – Augend
That bit of css is applied to the body tag right? It works great for me in up-to-date Chrome jsfiddle.net/kdjFD/embedded/result . What browser are you testing? – Edita
No, body { width: 100%; height: 100%; } doesn't work. I guess I have to apply it to <html> too. – Marasmus
Don't use the old -webkit- syntax. Use the official W3C syntax – Rexanne
@TimNguyen: This question was asked three years ago, when there was no browser support for that. – Marasmus
related: https://mcmap.net/q/144255/-how-to-remove-the-stripes-that-appears-when-using-linear-gradient-property-duplicate .. 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%} – Landpoor
P
280
html, body {
    margin: 0;
    height: 100%;
}
Procora answered 19/4, 2011 at 20:13 Comment(7)
It seems that all it takes is html { height: 100%; } actually. – Marasmus
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. – Aeromechanics
Why is this issue happening only when using background : linear gradient and not with simple background – Amidase
@Amidase Did you ever figure out why that is? – Boycie
If it's still not working for anyone just change 100% to 100vh. – Tiphani
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. – Headrail
When I change the height of a contained textarea, the overall height of the body changes (becomes much less than full screen). – Monostylous
A
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.

Adenoma answered 13/6, 2013 at 18:58 Comment(4)
Neither of them need width: 100%;. – Marasmus
because of display:block nature – Dairyman
also margin: 0; is enough, no need to specify which unit you use zero of – Distrain
For me this almost works, but is a bit too high. – Monostylous
K
25

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

Keil answered 24/5, 2015 at 21:18 Comment(1)
For me, this is a bit too high; the body overflows the page, in Chrome. – Monostylous
F
12

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

Furlana answered 24/11, 2011 at 12:53 Comment(0)
T
7

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.

  1. <body> reaches the edge of the window.
  2. <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>
Tubular answered 20/10, 2020 at 14:29 Comment(0)
O
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.

Olivenite answered 25/7, 2016 at 18:11 Comment(0)
V
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%;
}
Vadavaden answered 25/12, 2017 at 23:52 Comment(1)
The important parts of this are the same as the answer accepted six years ago, sorry. – Marasmus
B
3

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

not good

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

good

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)

Bargain answered 22/10, 2018 at 14:23 Comment(1)
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. – Greengage
B
2

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; }
Bashemath answered 17/10, 2018 at 8:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.