html 有时页面较短 页脚往上跑很难看,html - 为什么页脚上的CSS边框将页面推到100％以上 - 堆栈内存溢出...

我正在使用此方法将页脚正确地放在页面底部。

但是，当在页脚中添加边框时，无论屏幕上的内容如何，​​最终都会出现滚动条。 我的困惑是：

我认为边框在填充外部但在边距内部起作用，因此像填充一样，它们不会影响div外部的任何布局 。

错了吗

这是我的基本HTML：

这是相关的CSS：

#top

{

height: 105px;

border-bottom-style: solid;

border-bottom-color: #044E97;

border-bottom-width: 7px;

}

#body

{

margin-top: 25px;

width: 100%;

background-color: white;

color: #282828;

font-size: 85%;

}

#box1

{

width: 460px;

float: left;

margin-left: 25px;

margin-right:75px;

}

#box2

{

margin-left: 25px;

margin-top: 15px;

padding-top: 0%;

padding-bottom:0%;

margin-bottom:45px;

width: 350px;

height: 320px;

float:left;

border-top-style: solid;

border-top-color: #FFFFFF;

border-top-width: 10px;

}

html

{

height: 100%;

}

body

{

min-height: 100%;

background-color: white;

margin: 0;

}

html, body

{

min-height:100%;

position:relative;

}

.wrapper

{

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 auto -3em;

}

.footer, .push

{

height: 3em;

clear: both;

}

.footer

{

width:100%;

background-color: #0563A1;

border-top-style: solid;

border-top-color: #044E91;

border-top-width: 8px;

color: white;

font-size: 77%;

padding-top:.3em;

padding-bottom:.3em;

}

如果将页脚div更改为没有填充，滚动条将清除。