Can a div fill up the entire viewport with a pixel-based margin, not using the CSS3 calc property?

问题

I've found a (hacky) way to have a div take up the full viewport of a browser, minus a pixel-based margin, by utilizing the CSS3 calc property like so (see fiddle):

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

div {
  background: linear-gradient(red, yellow);
  height: calc(100% - 26px);
  margin: 13px 0 0 13px;
  width: calc(100% - 26px);
}

<body>
  <div></div>
</body>

Is it possible to do the same thing with only CSS 2.1 properties? I know calc has been supported in most browsers for quite some time but it also looks like the most popular polyfills have their limitations. I have been beating my head against the wall trying to find a more elegant solution - for instance, one where I don't have to lock down the oversized viewport with overflow:hidden. It seems close to impossible to do without the use of calc or vh / vw units.

回答1:

For the width you don't need to do anything since it will by default take all the space. And for height you can consider padding on the body and use height:100%

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 13px 0;
  box-sizing:border-box;
}
div {
  background: linear-gradient(red, yellow);
  height: 100%;
  margin: 0 13px;
}

<body>
  <div></div>
</body>

Or padding on all the sides without margin:

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 13px;
  box-sizing:border-box;
}
div {
  background: linear-gradient(red, yellow);
  height: 100%;
}

<body>
  <div></div>
</body>

Or a fixed element and you don't have to bother setting width/height on body/html

body > div {
  position:fixed;
  top:13px;
  left:13px;
  bottom:13px;
  right:13px;
  background: linear-gradient(red, yellow);
}

<body>
  <div></div>
</body>

You can also consider the use of transparent border:

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
div {
  background: linear-gradient(red, yellow) padding-box;
  height: 100%;
  border:13px solid transparent;
  box-sizing:border-box;
}

<body>
  <div></div>
</body>

回答2:

        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        div {
            height: 100%;
            margin: 0;
            width: 100%;
            position: relative;
        }
        div::before {
            position: absolute;
            top: 13px;
            left: 13px;
            bottom: 13px;
            right: 13px;
            content: '';
            background: linear-gradient(red, yellow);
        }

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Gradient div</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div></div>
	</body>
</html>

You can simply try the following CSS:

    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    div {
        height: 100%;
        margin: 0;
        width: 100%;
        position: relative;
    }
    div::before {
        position: absolute;
        top: 13px;
        left: 13px;
        bottom: 13px;
        right: 13px;
        content: '';
        background: linear-gradient(red, yellow);
    }

来源：https://stackoverflow.com/questions/54768085/can-a-div-fill-up-the-entire-viewport-with-a-pixel-based-margin-not-using-the-c

标签

css

css-calc