div 是否可以使用基于像素的边距填充整个视口，而不使用 CSS3 calc 属性？答案

【问题标题】：Can a div fill up the entire viewport with a pixel-based margin, not using the CSS3 calc property?div 是否可以使用基于像素的边距填充整个视口，而不使用 CSS3 calc 属性？
【发布时间】：2019-10-29 07:46:48
【问题描述】：

我找到了一种（hacky）方法，通过使用 CSS3 calc 属性，让 div 占据浏览器的整个视口，减去基于像素的边距（参见 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>

是否可以仅使用 CSS 2.1 属性做同样的事情？我知道大多数浏览器都支持 calc 已经有一段时间了，但它also looks like the most popular polyfills have their limitations。我一直在努力寻找更优雅的解决方案——例如，我不必用overflow:hidden 锁定超大视口。不使用 calc 或 vh / vw 单位似乎几乎是不可能的。

【问题讨论】：

您可以使用absolute 或fixed 定位，将top、left、right 和bottom 设置为所需的边距大小，或者创建一个带有填充和填充的包装元素对两者都使用100% 大小
calc()'s not hacky。这是 HTML 标准。

标签： css css-calc

【解决方案1】：

对于宽度，您不需要做任何事情，因为默认情况下它会占用所有空间。对于高度，您可以考虑在身体上填充并使用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>

或者在没有边距的所有边上填充：

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>

或固定元素，您不必费心在 body/html 上设置宽度/高度

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

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

也可以考虑使用透明边框：

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>

【讨论】：

是的，或者，如果您需要明确指定（例如，如果您需要在之前更改宽度时重置它）将值设置为width: auto。
谢谢！第三个例子对我来说最有意义，所以我将继续使用它。
此外，只有第三个示例没有使用 box-sizing 属性，它与 calc 一样，不是 CSS 2.1 属性

【解决方案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>

您可以简单地尝试以下 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);
    }

【讨论】：

我也喜欢这个解决方案！很容易忘记::before 伪类有多么强大。