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

Question

我们公司的网站在最初设计的大屏幕尺寸（1920x1080 21.5" 屏幕）上看起来很好；但是当它在较小的屏幕尺寸（即 15" 笔记本电脑或手机）上查看时，页脚会与内容重叠以适应浏览器窗口的底部。

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

Answer 1

不要使用位置：绝对；为内容。使用位置：相对；反而

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