100% 宽度和高度的 HTML 填充？

Question

我有一些屏幕区域（父 div），我希望<div>完全填满，但我也希望其内容周围有 5% 的间隙。 如何最好地实施？

如果我应用规则： width: 100%; height: 100%; padding: 5%; width: 100%; height: 100%; padding: 5%; 它们产生了所需的效果（至少对于<div>本身），但它的边界现在超出了其父元素的边界2 * padding px。

我怎样才能确保这个<div>的边界占据其父边界的 100%，并且仍然保留 5% 的填充，而不会溢出？

注意：我确定我可以找到一些技巧（“只需将宽度和高度设置为 90%，因为填充是 5%..），我感兴趣的是最优雅、面向未来和智能的解决方案。当您能够使用更现代的 CSS 技术（如 Grid 和 Flex-box）时，似乎围绕单个 div 的定位和大小调整的某些问题几乎完全消失了，所以我也对此持开放态度。

Answer 1

如果我的想法是正确的，你需要使用box-sizing:border-box ，指定元素应该在元素的总宽度和高度中包含填充和边框：

喜欢

*{
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

请检查这个片段

 body { margin:0; padding:0; } .demo { width:100%; height:100vh; float:left; background:#000; padding:5%; box-sizing:border-box; }

 <div class="demo"></div>