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

后端未结

关注

 2  1519

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)

相关标签:

2条回答

名媛妹妹

2021-01-24 20:50

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>

0 讨论(0)

长情又很酷

2021-01-24 20:52

        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);
    }

0 讨论(0)