发表新帖
发表新帖

Make <body> fill entire screen?

前端 未结
关注
10 967
春和景丽
春和景丽 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:39

    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)

    0 讨论(0)
  • 感动是毒
    2020-11-27 11:39

    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>
    0 讨论(0)
  • 情话喂你
    2020-11-27 11:42

    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; }
    0 讨论(0)
  • 臣服心动
    2020-11-27 11:43

    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.

    0 讨论(0)
  • 谎友^
    2020-11-27 11:49

    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.

    0 讨论(0)
  • 后悔当初
    2020-11-27 11:52

    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%;
}
    0 讨论(0)
 看不清?
提交回复
热议问题