尽管有粘性页脚，但页脚不会停留在低于内容的底部

Question

我似乎无法将页眉和页脚跨越iPhone等移动设备，并且页脚不会粘在底部。我尝试过这样的元代码：

我的CSS手机：

@charset "utf-8";

#logo {
left: 5%;   
}
#navMenu {
position: relative;
left: 5%;   
}
#content {
position: relative;
width: 95%;
height: 600px;
left: 2px;
right: 2px; 
}
#footer {
position: fixed;
bottom: 0;
z-index: 5; 
}

我已将此添加到HTML元：

meta name =“viewport”content =“width = device-width，height = device-height，initial-scale = 1.0 maximum-scale = 1.0，

这是我的桌面CSS，可能会覆盖我的手机：

#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 1;
box-shadow: 0px 0px 0px 1px rgba(82, 82, 82, 0.2);
background-color: rgba(234,234,234,1);  
}
#navMenu {
position: absolute;
left: 55%;
top: 55px;
width: 325px;
height: 39px;
z-index: 3;
}
#logo {
position: absolute;
left: 20%;
top: 95px;
width: 300px;
height: 85px;
z-index: 1;
}
#pageLocation {
position: absolute;
right: 20%;
top: 240px;
width: 69px;
height: 25px;
z-index: 5;
color: rgba(50,153,204,0.1);
}
#content {
position: absolute;
right: 20%;
top: 270px;
height: 600px;
width: 60%;
padding: 10px;
margin-bottom: 50px;
z-index: 2;
border-bottom-color: rgba(50,153,204,0.2);
border-bottom-width: thin;
border-bottom-style: solid;
border-radius: 5px;
background-color: rgba(204,204,204,.1);
border-right-width: thin;
border-right-style: solid;
border-right-color: rgba(204,204,204,0.2);
border-left-width: thin;
border-left-style: solid;
border-left-color: rgba(50,153,204,0.2);    
box-shadow: 0px .5px .5px .5px #333;
}
#footer {
position: absolute;
alignment: center;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1;
text-align: center;
padding: 2px;
font-size: 12px;
line-height: 2px;
box-shadow: 0px 0px 3px 0px #333;
background-color: rgba(204,204,204,.7);
}

我尝试过没有运气的粘性页脚技术。我已经使用这种方法将页脚粘到底部，但是当我向上滚动时它只是重叠内容。请帮助，这是一个非常令人沮丧的获得一个简单的iPhone / Android功能页脚位于页面底部。