网站页脚在较小的屏幕上重叠页面内容

Question

Our company website在最初设计的大屏幕尺寸（1920x1080 21.5“屏幕）上看起来很好;但是当在较小的屏幕尺寸（即15”笔记本电脑或移动设备）上观看时，页脚重叠内容以适应浏览器窗口的底部。

我遵循了一个粘性页脚教程，它似乎没有起作用。页脚下方还有额外的空白区域，导致y-scrollbar出现。

Answer 1

不要使用position：absolute;对于内容。使用位置：相对;而是

<style type="text/css">
html, body
{
    height: 99%;
    background-color:Black;
}
.header
{
    width: 960px;
    height: 15%;
    background-color:Gray;
}
#Content
{
    min-height: 85%;
    width: 960px;
    background-color:Navy;
}
.con
{
    min-height:900px;
    width:960px;
    background-color:Aqua;
}

和

   <div class="header">
   </div>
   <div id="Content">
   <div class="con"></div>
   </div>
   <div class="header">
   </div>