如何在没有滚动的情况下使div的高度和宽度变为具有特定边距的全屏显示

Question

我想让div在浏览器中创建一个具有相同高度和宽度的框，并在边缘周围留出5px的边距。

我试图通过以下代码实现

div#welcome {
    height: 100vh;
    border: 2px green;
}

div#welcome2 {
    width: inherit;
    height: inherit; 
    background: silver;
    margin: 20px 20px 20px 20px;

}

<div id="welcome">
    <div id="welcome2">
    </div>
</div>

但是它总是与滚动条一起出现。

事实并非如此。我想将其作为一个全尺寸的容器来实现，在浏览器的所有侧面都具有20px的边距，没有滚动条。

Answer 1

选项1：使用calc()：

calc()

body {
  margin: 0;
}
div {
  height: calc(100vh - 20px);
  width: calc(100vw - 20px);
  margin: 10px;
  background-color: red;
}

选项2：使用透明边框，<div></div>和background-clip：

background-clip

box-sizing

Answer 2

为您的div使用宽度和高度只会设置内容的大小。要达到该大小，您必须添加边距，边框和填充。

css中有box-sizing。您可以将其设置为

body { margin: 0; }

div {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: 10px solid transparent;
  background-clip: content-box;
  background-color: red;
}

，这将使填充和边框包含在<div></div>和box-sizing中。