html - Height:100% 和 Margin 问题，延伸超过 100%

Question

这是我的 Playground 链接: http://cssdeck.com/labs/7u6ex40p

如您所见，我已将其高度设置为 100%，但它的边距超出了 100%。显然这是因为边距，我试过更改它们，使边距为 2%，高度为 96%，但这没有用。我在这里结束了。

干杯，克里斯

Answer 1

不是为 pageborder 设置边距，而是为 body 设置 padding 并将 box-sizing 设置为 border-box。

html, body {
  height:98%;
  width:100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  background-color:#fff;
  margin:0;
  border: 0;
  padding: 2%;  /* changed */
  box-sizing: border-box;  /* changed */
}

#pageborder {
  background:  rgba(86, 86, 86, 0.06);
  height:100%%;
}

http://cssdeck.com/labs/vla26uvc