如何让div带边距填满视口？CSS单位与盒模型实现方案

嘿，这个需求用基础CSS完全能搞定，不用依赖flexbox或grid，核心就是处理好浏览器默认样式和盒模型的计算逻辑，我给你两个简单易上手的方案：

方案一：利用body的padding实现边距（更简洁） #

这个方案把body的padding当作div和视口之间的边距，通过box-sizing: border-box确保body的宽高不会因为padding而超出视口：

/* 重置浏览器默认的margin和padding，避免干扰 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* 让html和body占满整个视口高度 */
}

body {
  padding: 20px; /* 这里的数值就是你想要的边距大小 */
  box-sizing: border-box; /* 关键：让padding被包含在body的100%宽高内，不会撑出滚动条 */
}

.target-div {
  width: 100%;
  height: 100%;
  background: #e0e0e0; /* 加个背景色方便看效果 */
}

关键点解释： #

• 重置html和body的默认margin/padding：浏览器默认会给body加8px左右的margin，必须清掉才能避免不必要的滚动条。
• box-sizing: border-box：这个属性会让元素的padding和border都被计算在设定的宽高内，而不是额外叠加，这是避免超出视口的核心。

方案二：直接给div设置margin（用calc计算宽高） #

如果你更希望直接给div本身加margin，可以用calc()来动态计算div的宽高，减去margin的总和：

/* 同样先重置默认样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.target-div {
  margin: 20px; /* 自定义边距大小 */
  width: calc(100% - 40px); /* 100%视口宽度 - 左右margin各20px */
  height: calc(100% - 40px); /* 100%视口高度 - 上下margin各20px */
  background: #e0e0e0;
  box-sizing: border-box; /* 如果div内部要加padding或border，也不会超出计算好的宽高 */
}

关键点解释： #

• calc()是CSS基础属性，支持简单的加减乘除运算，这里用来精准减去margin的总长度，保证div加上margin后刚好填满视口。
• 同样要给html和body设置height: 100%，这样div的height: calc(100% - 40px)才能基于视口高度计算。

这两个方案都完全符合你的要求，用的都是最基础的CSS属性，不会出现滚动条，你可以根据自己的习惯选择~

内容的提问来源于stack exchange，提问作者TMOTTM