Question

所以，我需要将我的网站放在一个容器中，这个容器的浏览器窗口的边距是30px，如下所示：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容器最终达到了很高的高度。我的上一个示例在调整浏览器窗口大小时出现问题..

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用position的另一种方法：绝对。还要注意删除html和body上的填充和边距。这似乎也消除了滚动条。

＆＃13;

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}

#wrap {
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  border: 1px solid blue;
}

＆＃13;

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

＆＃13;

从浏览器窗口设置边距

1 个答案: