Make body 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  lt body gt  element fill the entire page  always

User · Answer

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

User · Answer

The goal is to make the  lt body gt  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  lt body gt  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  lt body gt   body     margin  0     there are two main reasons for doing so    lt body gt  reaches the edge of the window   lt body gt  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  x000D   x000D  body     min-height  100vh    margin  0    background  radial-gradient circle  rgba 255 255 255 1  0   rgba 0 0 0 1  100      x000D   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt meta charset  UTF-8  gt     lt meta name  viewport  content  width device-width  initial-scale   gt     lt title gt test lt  title gt   lt  head gt   lt body gt   lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

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  lt header gt  tag had a margin-top of 5em and the  lt footer gt  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  lt body gt  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

User · Answer

I had to apply 100  to both html and body

User · Answer

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

User · Answer

This works for me     lt  doctype html gt   lt html gt   lt head gt     lt meta charset  utf-8    gt     lt title gt  Fullscreen Div  lt  title gt     lt style gt     test      position  fixed      width  100       height  100       left  0      top  0      z-index  10         lt  style gt   lt  head gt   lt body gt     lt div class  test  gt Some text lt  div gt   lt  body gt   lt  html gt

User · Answer

If you have a border or padding  then the solution   x000D   x000D  html  body   x000D      margin  0  x000D      height  100   x000D    x000D  body   x000D      border  solid red 5px  x000D      border-radius  2em  x000D    x000D   x000D   x000D    produces the imperfect rendering    To get it right in the presence of a border or padding    use instead   x000D   x000D  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    x000D   x000D   x000D    as Martin pointed out  although overflow  hidden is not needed    2018 - tested with Chrome 69 and IE 11

User · Answer

html  body       margin  0      height  100

User · Answer

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

User · Answer

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

[html] Make <body> fill entire screen?

Examples related to html

Examples related to css

Examples related to radial-gradients