发表新帖
发表新帖

Make <body> fill entire screen?

前端 未结
关注
10 968
春和景丽
春和景丽 2020-11-27 11:37

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

background-image: -webkit-gradient(radial, 100
相关标签:
10条回答
  • 伪装坚强ぢ
    2020-11-27 11:54 
    html, body {
    margin: 0;
    height: 100%;
}
    0 讨论(0)
  • 甜味超标
    2020-11-27 11:54

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

    0 讨论(0)
  • 孤街浪徒
    2020-11-27 11:59

    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

    0 讨论(0)
  • 别跟我提以往
    2020-11-27 12:01

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题