Body border surrounding all my page (NOT FIXED) - html

Question

What I want is creating a border surrounding all my page content, the top border is fine but the others and especially the bottom border is not positioned where I want, I want it to be always in the bottom of my page.
html,
body {
min-height: 100%;
height: 100%;
}
body {
margin: 0;
padding: 45px;
min-height: 100%;
z-index: 1;
}
#barTop,
#barLeft,
#barBottom,
#barRight {
display: block;
position: absolute;
background-color: #f8ee53;
z-index: 2;
}
#barTop,
#barBottom {
right: 20px;
left: 20px;
height: 25px;
}
#barTop {
top: 20px;
}
#barBottom {
bottom: 20px;
}
#barLeft,
#barRight {
top: 20px;
bottom: 20px;
width: 25px;
}
#barLeft {
left: 20px;
}
#barRight {
right: 20px;
}
<div id="barTop"></div>
<div id="barRight"></div>
<div id="barBottom"></div>
<div id="barLeft"></div>
Result:
My border does not include all the content of my page.

Answer 1

remove this :
html,
body {
min-height: 100%;
height: 100%;
}
and use this
body {
margin: 0;
padding: 45px;
min-height: 100%;
z-index: 1;
}
#barTop, #barLeft, #barBottom, #barRight {
display: block;
position: absolute;
background-color: #f8ee53;
z-index: 2;
}
#barTop, #barBottom {
right: 20px;
left: 20px;
height: 25px;
}
#barTop {
top: 20px;
}
#barBottom {
bottom: 20px;
}
#barLeft, #barRight {
top: 20px;
bottom:20px;
width: 25px;
}
#barLeft {
left: 20px;
}
#barRight {
right: 20px;
}

Answer 2

You should be able to fix this by adding the following under your existing body selector:
body {
box-sizing: border-box;
}
I made a jsfiddle that demonstrates it, with a black background on the body to better illustrate it:
JS Fiddle

Answer 3

The problem is caused by the padding on the body. It is not taken into account when the height is calculated at 100%. Either remove the padding or do what mtr web suggested and add box-sizing: border-box; Run the snippet below to see it work.
html,
body {
min-height: 100%;
height: 100%;
}
body {
margin: 0;
padding: 45px;
min-height: 100%;
z-index: 1;
box-sizing: border-box;
}
#barTop,
#barLeft,
#barBottom,
#barRight {
display: block;
position: absolute;
background-color: #f8ee53;
z-index: 2;
}
#barTop,
#barBottom {
right: 20px;
left: 20px;
height: 25px;
}
#barTop {
top: 20px;
}
#barBottom {
bottom: 20px;
}
#barLeft,
#barRight {
top: 20px;
bottom: 20px;
width: 25px;
}
#barLeft {
left: 20px;
}
#barRight {
right: 20px;
}
<div id="barTop"></div>
<div id="barRight"></div>
<div id="barBottom"></div>
<div id="barLeft"></div>