Height:100% and Margin problems, extending past 100%

Question

Here is my playground link: http://cssdeck.com/labs/7u6ex40p

As you can see, i've given it a height of 100% yet it extends further than 100% with the margins. Evidently this is because of the margins, I've tried changing them so the margin is 2% and the height is 96% yet this didn't work. Im at all ends here.

Cheers, Chris

Answer 1

Instead of having a margin for the pageborder, make it padding for the body and set box-sizing to 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