Lightbox does not cover the entire screen

Question

When I open the image in the lightbox, and I scroll down the page, it looks like this:

Can someone help me?

my code is as follows:

html:

     <div class="mtlsr-images-for-lightbox">
    <ul>
        <li>
            <a href="images/1.jpg">
                <img src="images/1.jpg" alt="" />               </a>            </li>
        <li>
            <a href="images/2.jpg">
                <img src="images/2.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="images/3.jpg">
                <img src="images/3.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="images/4.jpg">
                <img src="images/4.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="images/5.jpg">
                <img src="images/5.jpg" alt="" />
            </a>
        </li>
    </ul>
</div>

CSS:

.mtlsr-lightbox{display:none;position:absolute;width:100%;height:100%;z-index:99999999999999;top:0;}
.mtlsr-lightbox .image-in-lightbox{max-width:700px;width:100%;position:absolute;z-index:999;top:10%; margin-left: auto;margin-right: auto;left: 0;right: 0;}

.close, .next, .prev{position:absolute;z-index:9999;}
.close{position:absolute;right:20px;top:20px}
.next, .prev{top:50%}
.next{right:20px;}
.prev{left:20px;}

.mtlsr-images-for-lightbox{max-width:600px;margin:0 auto;overflow:hidden}
.mtlsr-images-for-lightbox ul li{float:left;display:inline;width:30%;margin:1%;padding:1%;background-color:#fff;border-top:2px solid #598dca}
.mtlsr-images-for-lightbox ul li a img{width:100%;height:auto;}
.mtlsr-lightbox{            
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-8 */
}
.mtlsr-lightbox .image-in-lightbox{
border-radius:5px
}
.close, .next, .prev{color:#666;font-size:30px;text-decoration:none;}
.next, .prev{color:#aaa;font-size:80px;}
.close:hover, .next:hover, .prev:hover{color:#fff;}

js:

$(document).ready(function() {
        var current = '.mtlsr-images-for-lightbox ul li.current';

        //Função para verificar a posição atual da imagem e remover as setas(prev e next) conforme necessário
        function check_image_position(){                
            if ($(current).is(':last-child')) {
                $('.next').hide();
                $('.prev').show();
            }else if ($(current).is(':first-child')) {
                $('.next').show();
                $('.prev').hide();
            }else{
                $('.next, .prev').show();
            }
        }           

        $('.mtlsr-images-for-lightbox ul li').on('click', 'a', function(event) {
            event.preventDefault();
            var big_image_href = $(this).attr('href');

            $(this).parent().addClass('current');
            $('.mtlsr-lightbox').fadeIn();
            $('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');

            check_image_position();
        });
        //Fechar
        $('.mtlsr-lightbox').on('click', '.close', function(event) {
            $('.mtlsr-lightbox').fadeOut();
            $('.mtlsr-lightbox .image-in-lightbox').remove();
            $(current).removeClass('current');
        });
        //Função Next e Prev
        $('.mtlsr-lightbox a').on('click', function(e){             
            if($(this).attr('class')=='next'){
                var big_image_href = $(current).next().find('a').attr('href');                  

                $(current).next().addClass('current');
                $(current).prev().removeClass('current');

            }else if($(this).attr('class')=='prev'){
                var big_image_href = $(current).prev().find('a').attr('href');

                $(current).prev().addClass('current');
                $(current).next().removeClass('current');
            }
            check_image_position();

            $('.mtlsr-lightbox .image-in-lightbox').remove();
            $('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
        });
    });

Answer 1

Change your first line to:

  .mtlsr-lightbox {
                    display: none;
                    position: absolute;
                    width: 100%;
                    min-height: 100%;
                    height: auto;
                    z-index: 999999;
                    top: 0;
                  }

And take the test. But first set your body to 100%.

html, body { height: 100% }

You can also pass the height based on the height of the browser through a jquery method:

 $(document).ready(function() {
            var altura = $(window).height();
            $('.mtlsr-lightbox').height(altura);
        });

Answer 2

Instead of position: absolute; place position: fixed;

.mtlsr-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}