Javascript 如何使div的高度和宽度在没有滚动的情况下达到具有特定边距的全屏

我想有一个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>

欢迎光临{ 高度：100vh； 边框：2倍绿色； } 部门2{ 宽度：继承； 身高：继承； 背景：银； 保证金：20px 20px 20px 20px； } 但它总是与滚动条一起出现

---

情况不应该如此。我想把它做成一个全尺寸的容器，浏览器的每一面都有20px的边距，没有滚动条。

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

css中提供了

框大小调整

。您可以将其设置为

边框框

，这将使填充和边框包含在

宽度

和

高度

选项1中：使用：

正文{
保证金：0；
}
div{
高度：计算（100vh-20px）；
宽度：calc（100vw-20px）；
利润率：10px；
背景色：红色；
}

---

回答得好。就像这种计算方法一样，尽管有时很难有20px的固定代码注意定义宽度是无用的，因为默认情况下它是满的width@TemaniAfif，同意，如果没有将

位置

设置为

绝对

或

固定

，这是模态和叠加的常见情况。“为了清楚起见，我认为在这种情况下，长篇大论是最好的。”泰马尼，毫无疑问，这个问题以前有人问过。但如果你把它标记为复制品，至少要做对。这个问题中绝对没有OP要求“不使用CSS3 calc”，并且出于某种原因，您已将其标记为一个问题的副本，该问题在这方面非常具体。@AndreiGheorghiu我们不关闭这个问题，因为它的标题。。这两个问题都涉及同一个问题，而另一个问题只是有一个额外的要求，但最终目标是相同的，所有的解决方案都适用于这里。calc（）只是实现这一点的众多方法中的一种。@AndreiGheorghiu换句话说，如果OP发现了这个副本，他可以很容易地通过calc（）或不通过calc（）实现他想要的。因此它是一个副本。我真的不反对你将其作为副本关闭的决定。我本应该自己做的，但回答起来似乎比找到一个副本要简单（我很懒）。Ref是同一个问题：这对我和你来说都很明显，就像我们有经验一样，但对初学者来说却不那么明显。换句话说，我很确定链接问题的“不使用计算器”部分是一个XY问题，这使你的决定正确，但我们至少应该在这个问题上添加一个更“合适”的副本。我会处理的。干杯