我正在使用此方法将页脚正确地放在页面底部。
但是,当在页脚中添加边框时,无论屏幕上的内容如何,最终都会出现滚动条。 我的困惑是:
我认为边框在填充外部但在边距内部起作用,因此像填充一样,它们不会影响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更改为没有填充,滚动条将清除。