溢出在Mozilla中工作，但在Chrome和Android（-webkit-）浏览器上不起作用

Question

我想在页面中使用滚动条，以便向下滚动查看内容。页眉/页脚是固定的。

问题：在Chrome中，它不显示滚动条，图像也与标题重叠。 在Mozilla中，它显示正确。检查屏幕截图。

这是我的HTML。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-role="popup" class="popupimages hidden" id="imagesPopup">
  <header class="" id="customheader">
    <a style="visibility: visible;" class="backButton button">Done</a>
    <h1 id="pageTitle"></h1>
  </header>

  <div class="dump" style="width: 100%; height: 100%;">
    <img src="http://www.freeallimages.com/wp-content/uploads/2014/09/cat-clipart-1.gif" class="popimg">
  </div>
  <hr>

  <div class="info">
    <h1>we will append product info here.. <br>
                        will allow scroll.<br>
                        End of Info section.</h1>
  </div>

  <footer class="" id="customfooter" >
     <h2 id="curr_price" style="float: left; width: 30%;"></h2>
  </footer>
</div>

这是我的CSS。

.popimg{
    /*border:"1px solid",*/
    width:"320px",
    height:"320px",
    marginLeft:"-160px",
    marginTop: "-160px",
    backgroundColor:"#aaa"             
} 

.popupimages img{
    position:relative;
    width:200px; /*image width */
    height:200px; /*image height */
    left:50%;
    top:50%;
    margin-left:-50px; /*image width/2 */
    margin-top:-40px; /*image height/2 */
    /*border: 1px solid #bbb;*/
    border-bottom: 6px solid #ccc;
    border-radius:2px; 
} 

.popupimages {
    height: 100%;
    overflow-y: auto;
    border: 1px dashed;
    border-color: transparent;
    left:50%; 
    top:50%;
    bottom: 20%; 
}