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

【问题标题】：Website Footer is Overlapping Page Content on Smaller Screens网站页脚在较小的屏幕上与页面内容重叠
【发布时间】：2012-12-19 19:48:45
【问题描述】：

Our company website 在最初设计的大屏幕尺寸（1920x1080 21.5" 屏幕）上看起来不错；但是在较小的屏幕尺寸（即 15" 笔记本电脑或移动设备）上查看时，页脚与内容重叠适合浏览器窗口的底部。

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

【问题讨论】：

标签： html css overlapping

【解决方案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>

【讨论】：

感谢您的帮助！如果我在 logo 和 topnav div 上将定位从绝对位置更改为相对位置，那么整个网站上的所有对齐都会被取消。