页面Body元素全屏边框实现：底部边距问题求助

嘿，别担心，新手遇到这种布局细节问题太正常啦！你已经搞定了margin的问题，但底部间隙主要是因为两个关键点没处理好：元素高度的继承关系和盒模型的计算方式。

我给你两个靠谱的解决方案，你可以根据需求选：

方案1：适配固定视口高度（内容不超过屏幕时） #

这个方案让body严格撑满当前视口：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: gray;
  border: 10px outset #596779;
}

为什么这么写：

• 同时给html和body设置height:100%，因为body的高度默认由内容撑开，必须让父元素html先占满视口，body才能继承到100%的高度
• box-sizing: border-box是核心！它会把边框和内边距都算在元素的width/height里面，不会因为10px的边框让body总高度超过视口，导致底部出现滚动条或者间隙
• 清除html和body的默认margin、padding，彻底消除所有默认间隙

方案2：适配内容可延伸的场景（更推荐） #

如果你的页面内容可能超过屏幕高度，用这个方案更合适，边框会跟着内容自动延伸：

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 用视口单位直接让body至少占满整个视口高度 */
  box-sizing: border-box;
  background-color: gray;
  border: 10px outset #596779;
}

这里用min-height:100vh代替height:100%，vh是视口高度单位，100vh就是当前浏览器窗口的高度，min-height保证body至少这么高，内容多的时候会自动拉长，边框也会跟着覆盖整个内容区域。

你可以试试这两个方案，应该就能解决底部的间隙问题啦！

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