标签 javascript html css
<分区>
我想让 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，没有滚动条。
最佳答案
选项 1:使用 calc() :
body {
margin: 0;
}
div {
height: calc(100vh - 20px);
width: calc(100vw - 20px);
margin: 10px;
background-color: red;
}<div></div>选项 2:使用透明边框，background-clip和 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>关于javascript - 如何在没有滚动的情况下使div的高度和宽度以特定的边距全屏显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58599555/
相关文章：
javascript - 使绝对定位的div获取父div的尺寸
javascript - 通过 HTML 初始化 Angular 2 组件的正确方法
javascript - Tomcat7 压缩 JS/CSS
javascript - JS : Loop forces ascending sorting, 如何保持定义的顺序？
html - 如何选择没有 firstChild 或 nth-child() 的 child 的 child ？
php - 使用相同的 SQL 表根据下拉列表自动填充文本字段