溢出时页脚消失：自动应用于内容＆＃34;以上＆＃34;它

Question

我认为对于HTML和HTML经验丰富的人来说，这是一个简单的问题。 CSS，但我搜索了谷歌和StackOverflow的答案，似乎无法找到它。

我有一个图像库，在移动设备（宽度＆lt; x）中显示垂直对齐的图像库，用户垂直滚动图像库。 CSS overflow：auto应用于imageGallery，当deviceWidth＆lt; X

我有一个页脚，我想粘在页面底部。图库应该可滚动＆＃34;后面＆＃34;页脚，而页脚仍应可见。溢出：自动应用于图库时，即使位置：固定或绝对或相对应用于页脚，页脚也会消失。你有解决这个问题的方法吗？

提前谢谢！

有问题的HTML：

<section id="gallerySection">
<!--images  in this section-->
</section>

<footer>
<!--footer comes after the imageGallery in HTML layout-->
</footer>

CSS：

body{
background-color: black;
padding: 0px;
margin: 0px;
width: 100;
height: 100%;
overflow: hidden;
}

*{
box-sizing: border-box;
}

#gallerySection{
width: 70%;
height: 70%;
position: absolute;
top: 15%;
left: 15%;
background-color: black;
z-index: -1;
margin: 0px;
}

//the images in gallery are shown vertically as block objects when screen
//width is low. When deviceWidth is > than this there is a different
//code for imageGallery entirely that works fine.
@media screen and (max-width: 580px){
#gallerySection{
    height: 60%;
    overflow: auto; 
}
}

footer{
background-color: gray;
width: 70%;
height: 15%;
min-height: 15%;
position: fixed;
bottom: 0px;
left:15%;
margin: 0px;
z-index: 1;

}