HTML&CSS技术问题：body无法完全适配内容如何解决？
我想实现类似常用文字处理器里新文档的页面效果，用了下面的HTML代码，在最新Chrome里打开：
<!DOCTYPE html> <html> <head> <title>Page Test</title> <style> body, html { margin: 0px ; background-color: darkgrey ; } .page { position: absolute ; background-color: white ; width: 2970px ; height: 2100px ; margin: 16px ; } </style> </head> <body> <div class="page"></div> </body> </html>
现在的问题是：能看到左侧和顶部的灰色边距，页面也出现了滚动条，但滚动到最右侧或最底部时，完全看不到右侧和底部的灰色边距。我试过把margin改成40px，也移除了position: absolute改成普通块级元素，都没用。我原本以为body会连同边距一起适配内容，是不是我误解了它的工作机制？
问题原因
当元素设置了固定宽高（比如你的.page设了width:2970px和height:2100px），无论是否绝对定位，body的高度和宽度只会默认适配视口（浏览器窗口）的大小，不会主动延伸到元素的外边缘（包含margin）。
滚动条的出现是因为元素的宽高超过了视口，但body本身并没有被元素的margin“撑开”到足够大，所以滚动到最底部/右侧时，body的范围已经结束，自然看不到灰色背景的边距。
解决办法
可以用以下两种方案实现预期效果：
方案1：给body添加内边距，将.page放在内边距区域里
把body的margin:0改成padding:16px，同时去掉.page的margin，再让body的背景色为灰色，这样内边距区域就是灰色边距，而.page放在中间：
body, html { margin: 0; background-color: darkgrey; padding: 16px; /* 这就是你要的灰色边距 */ min-height: calc(100vh - 32px); /* 避免视口高度不够时底部padding被挤没 */ box-sizing: border-box; /* 让padding算在元素总宽高内 */ } .page { background-color: white; width: 2970px; height: 2100px; /* 去掉原来的margin */ }
这种方式下，body的内边距会始终存在，滚动时无论到哪个位置，都能看到四周的灰色边距。
方案2：用容器包裹.page，给容器加padding作为边距
如果不想修改body的样式，可以额外加一个容器div，给容器设置灰色背景和padding，把.page放在里面：
<body> <div class="page-container"> <div class="page"></div> </div> </body>
body, html { margin: 0; height: 100%; } .page-container { background-color: darkgrey; padding: 16px; min-height: 100%; box-sizing: border-box; } .page { background-color: white; width: 2970px; height: 2100px; }
这个方案和方案1原理类似，只是把边距的载体从body换成了自定义容器，灵活性更高。
补充：为什么原来的absolute定位没用？
绝对定位的元素是相对于最近的非static定位父元素（这里是body，因为html默认static）来定位的，但body的宽高还是只到视口边缘。元素的margin会让它偏离左上角，但body不会因为这个margin而扩大自己的范围，所以滚动到边缘时，body没有延伸过去，自然看不到灰色背景。
内容的提问来源于stack exchange，提问作者Nick Gris
