能否不使用CSS3 calc属性实现带像素边距的全屏视口div？

嘿，你提到的这个calc方案确实简洁，但如果要限制在CSS2.1的范围内，我们完全可以通过绝对定位的技巧来实现同样的效果，而且还不用给页面加overflow:hidden锁定视口。

具体实现代码 #

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
  margin: 0;
  /* 这里不需要overflow:hidden啦 */
}
div {
  background: linear-gradient(red, yellow);
  position: absolute;
  top: 13px;
  right: 13px;
  bottom: 13px;
  left: 13px;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

为什么这个方案可行？ #

CSS2.1里的绝对定位有个实用特性：当你同时给绝对定位元素设置top、right、bottom、left四个方向的具体数值时，元素会自动拉伸自身尺寸，填满这四个值划定的区域。这样一来，就自然实现了“占满整个视口，同时四周保留13px边距”的效果，完全不用计算100% - 26px这种相对值。

而且这个方法不需要给html或body加overflow:hidden——只要你的内容都放在这个定位的div里，页面就不会出现多余的滚动条；如果后续页面有其他需要滚动的内容，也能正常工作，不会被锁定。

对比你原来的方案 #

• 兼容性拉满：能兼容到IE7及以上，完全不依赖CSS3特性
• 逻辑更直观：直接通过四个方向的边距定义空间，不用做减法计算
• 更灵活：不会因为overflow:hidden限制页面的滚动行为

唯一需要注意的小细节是：绝对定位元素默认会相对于初始包含块（也就是浏览器视口）定位，只要父元素没有设置position: relative/absolute/fixed，这个逻辑就完全成立，刚好符合我们的需求。

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