On the problem of adaptive white edges of pictures on mobile devices

this page is mainly used on mobile phones. There is always a white area below. Why can"t you go to it? what is the reason?

html part

<body>
  <div class="wrap">
    <img src="img/background.gif" alt="" />
        <div class="btn">
            <a href="">
                <img class="download" src="img/download.png" alt="" />
            </a>
        </div>
    </div>
</body>

css part

*{padding:0;margin:0}

img{
    vertical-align: middle;
}

body{
    position:relative;
}

.wrap{
    height:100%;
    min-width:320px;
    max-width:640px;
    margin:0 auto;
}

img{
    width:100%;
    height:100%;
}

.btn{
    width:40%;
    position:absolute;
    left:30%;
    bottom:3%;
}
Feb.27,2021

body,html{height:100%}

body does not set the height, and the child element cannot get the height.

of course there are other solutions, such as 100vh

Menu