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>