围绕我的所有页面的身体边框（未固定）

Question

我想要的是创建一个包围我所有页面内容的边框，顶部边框很好，但其他的，特别是底部边框不在我想要的位置，我希望它始终位于我的页面底部。

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>

结果： 我的边框不包含我页面的所有内容。

Answer 1

删除它：

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

Answer 2

您应该可以通过在现有正文选择器下添加以下内容来解决此问题：

body {
    box-sizing: border-box;
}

我制作了一个演示它的jsfiddle，身体上有黑色背景以更好地说明它：

JS Fiddle

Answer 3

问题是由身体上的填充物引起的。高度计算为100％时不予考虑。删除填充或执行mtr网站建议并添加box-sizing: border-box;运行下面的代码段以查看它是否有效。

＆＃13;

＆＃13;

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

＆＃13;

<div id="barTop"></div>
<div id="barRight"></div>
<div id="barBottom"></div>
<div id="barLeft"></div>

＆＃13;

＆＃13;

＆＃13;