div 可以用基于像素的边距填充整个视口，而不使用 CSS3 计算属性吗？

Question

我找到了一种（hacky）方法让 div 占据浏览器的整个视口，减去基于像素的边距，方法是利用 CSS3 calc 属性像这样（参见 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 单位，这似乎几乎是不可能的。

Answer 1

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

上设置 width/height

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>

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

div 可以用基于像素的边距填充整个视口，而不使用 CSS3 计算属性吗？

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

css

css-calc

div 可以用基于像素的边距填充整个视口，而不使用 CSS3 计算 属性 吗？

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

css

css-calc

div 可以用基于像素的边距填充整个视口，而不使用 CSS3 计算属性吗？