html - 大内容的固定 block

Question

我有固定的 block 宽度 width 100% 和 min-height 100%。
但是当我在那里添加大图像时(图像的高度超过 1 个屏幕)，我无法滚动它。
有什么建议吗？

JSFiddle:http://jsfiddle.net/e1yc2ab1/

$(document).ready(function() {
    for (var i = 0; i < 100; i++)
      $('body').append('123 TEST 123 <button onclick="$(\'#overlay\').show();">Open Preview</button><br />');   
    
    $('#overlay,.hidden-image').on('click', function() {
        $('#overlay').hide();
    });
});

html, body {
    margin: 0;
    padding: 0;
}

#overlay {
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    padding: 10%;
    display: none;
}

.hidden-image {
    width: 80%;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='overlay'>
    <div class="hidden-image">
        <img src='http://s4.pikabu.ru/images/previews_comm/2014-10_5/14140625135057.png' />
    </div>
</div>

Answer 1

如果删除 position: fixed;然后你可以滚动。如果它是固定的，则滚动不起作用，因为您看到图像固定在窗口中。