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?
This question is related to
html
css
radial-gradients
The answer is
This works for me:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> Fullscreen Div </title>
<style>
.test{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 10;
}
</style>
</head>
<body>
<div class='test'>Some text</div>
</body>
</html>
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;
}
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;
}
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; }
If you have a border or padding, then the solution
html, body {_x000D_
margin: 0;_x000D_
height: 100%;_x000D_
}_x000D_
body {_x000D_
border: solid red 5px;_x000D_
border-radius: 2em;_x000D_
}produces the imperfect rendering
To get it right in the presence of a border or padding
use instead
html, body {_x000D_
margin: 0;_x000D_
height: 100%;_x000D_
}_x000D_
body {_x000D_
box-sizing: border-box;_x000D_
border: solid red 5px;_x000D_
border-radius: 2em;_x000D_
}as Martin pointed out, although overflow: hidden is not needed.
(2018 - tested with Chrome 69 and IE 11)
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.
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>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%;
}
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.
I had to apply 100% to both html and body.
Source: Stackoverflow.com