重新调整屏幕尺寸时出现页脚

我试图在缩小屏幕时使页脚消失，​​但是具有绝对设置的页脚不断掩盖我的页眉和内容。

我应该如何设置页脚？

CSS代码

.body {
margin: 0;
min-width: 1000px;
}
.login {
background-color: #2797E9;
border-bottom: 5px solid grey;
height: 50px;
text-align: center;
}
.nav {
margin: 0 auto;
width: 1000px;
height: 40px;
border: 5px solid blue;
}
.mainleft {
width: 500px;
border: 5px solid black;
display: inline-block;
}
.mainright {
width: 500px;
border: 5px solid pink;
display: inline-block;
}
.footer {
border:5px solid green;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 50px;
text-align: center;
}