Question

我有一些屏幕区域（父级div），我希望我的<div>完全填满，但我也希望它的内容有5％的差距。怎么能最好地实施？

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

如何确保此<div>的约束占据其父级的100％，并且仍然保留5％的填充，而不会溢出？

注意：我确定我能找到一些黑客（＆＃34;只需将宽度和高度设置为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>

HTML填充，100％宽度和高度？

1 个答案: