从浏览器设置边距 window

Question

所以，我需要将我的网站放在一个容器内，该容器从浏览器 window 的各个方面都有 30 像素的边距，如下所示：http://i58.tinypic.com/1ik8xg.png .

到目前为止，我的元素上有这些样式：

body, html {
   height: 100%;
}

#wrap {
   height: 100%;
   border:1px solid black;
   margin-left:30px;
   margin-right:30px;
   margin-top:30px;
   margin-bottom:30px;
}

但在这种情况下，我得到了一个 y 滚动条，并且我的 #wrap 容器最终变高了。我的最后一个示例在调整浏览器大小时出现问题 window..

Answer 1

您可以使用 calc 来计算 100% - 60px。请注意，这不适用于 IE8 和 Opera Mini。我猜你可以先设置 height: 100%，然后再使用 calc 的规则。这应该为少数不支持计算的浏览器设置默认值。

body, html {
   height: 100%;
}

#wrap {
   height: calc(100% - 60px);
   border:1px solid black;
   margin-left:30px;
   margin-right:30px;
   margin-top:30px;
   margin-bottom:30px;
   box-sizing: border-box;
}

<div id="wrap">Hello</div>

另一种使用 position: absolute 的方法。还要注意删除 html 和正文中的填充和边距。这似乎也消除了滚动条。

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}

#wrap {
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  border: 1px solid blue;
}

<div id="wrap">Hello</div>

从浏览器设置边距 window

Setting margins from browser window

html

css

margin