'blank space at the bottom of everything on my page

I have a menu with a footer but when the height is greater than 1180px a blank space stands out that I tried in every way but I can't remove it and it's very annoying.

if I inspect that part it tells me that the white space is the body, I tried limiting the body and html but it still appears.

<footer class="footer-mobile">
                                        <ul class="footer-list-mobile">
                                            <li><a class="youtube" href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAx0lEQVRIie2SoRHCQBBFIxEUQAkIBAKBiKQECqAMPGVEREYgKCEFREQgEScREQgE4sRDsMwwwya3gVOQP3Pu//9udjdJBv2XgCmQASXg5DW0q3nxlZJdtJXPAN9RZpVXIUAeofypQgNUEQFHDeACoTVwMgIuGqBz/uIZAVvgGiJoAHMAmBDY2beAMbADbn0AwRGJbwOcA//xnyw5xX5pTgPUxrBFlQbIIwL2GmAeEZC+AQSyBAoe43IY7l08TjIHYKWWD/pd3QEypBT0POVpIwAAAABJRU5ErkJggg=="/><p>Youtube</p></a></li>
                                        </ul>
                                    <div class="content-footer">
                                        <img src="images/main/logo-min.png" alt="Logo E.E.S.T N°5">
                                            <p>Malvinas 1715, Libertad, Merlo (0220) 497-5100 Bs. As. Copyright © 2021
                                            </p>    
                                    </div>
                                </footer>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: auto;
}

html {
    height: auto;
    scroll-behavior: smooth;
}

.footer-mobile {
        width: 100%;
        height: auto;
        background-color: #202020;
        display: flex;
        flex-direction: column;
    }

    .footer-list-mobile {
        width: 100%;
        height: 5rem;
        border-bottom: 1px solid #cccccc20;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        list-style: none;
        padding-left: 2rem; 
    }

    .footer-list-mobile li {
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .footer-list-mobile li a {
        display: flex;
        text-align: inherit;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
    }
    .footer-list-mobile li a p {
        font-size: 1.1rem;
        margin-left: 0.5rem;
    }


    .footer-mobile .content-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 15rem;
    }

    .footer-mobile .content-footer img {
        max-width: 60px;
        cursor: pointer;
    }

    .footer-mobile .content-footer p {
        margin-top: 1rem;
        color: #fff;
        width: 80%;
        text-align: center;
    }

<footer class="footer-mobile">
                                        <ul class="footer-list-mobile">
                                            <li><a class="youtube" href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAx0lEQVRIie2SoRHCQBBFIxEUQAkIBAKBiKQECqAMPGVEREYgKCEFREQgEScREQgE4sRDsMwwwya3gVOQP3Pu//9udjdJBv2XgCmQASXg5DW0q3nxlZJdtJXPAN9RZpVXIUAeofypQgNUEQFHDeACoTVwMgIuGqBz/uIZAVvgGiJoAHMAmBDY2beAMbADbn0AwRGJbwOcA//xnyw5xX5pTgPUxrBFlQbIIwL2GmAeEZC+AQSyBAoe43IY7l08TjIHYKWWD/pd3QEypBT0POVpIwAAAABJRU5ErkJggg=="/><p>Youtube</p></a></li>
                                        </ul>
                                    <div class="content-footer">
                                        <img src="images/main/logo-min.png" alt="Logo E.E.S.T N°5">
                                            <p>Malvinas 1715, Libertad, Merlo (0220) 497-5100 Bs. As. Copyright © 2021
                                            </p>    
                                    </div>
                                </footer>

This blank space only happens to me when I open the menu and the screen is larger than 1180px, but when the menu is closed I have no problem. I already tried giving 100% height to the HTML and min-heigh to the body but it didn't work either.

htmlcss


Solution 1:[1]

You can try this to add style="display: block;" to your img

<footer class="footer-mobile">
        <ul class="footer-list-mobile">
         <li><a class="youtube" href="#"><img style="display: block;"       src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAx0lEQVRIie2SoRHCQBBFIxEUQAkIBAKBiKQECqAMPGVEREYgKCEFREQgEScREQgE4sRDsMwwwya3gVOQP3Pu//9udjdJBv2XgCmQASXg5DW0q3nxlZJdtJXPAN9RZpVXIUAeofypQgNUEQFHDeACoTVwMgIuGqBz/uIZAVvgGiJoAHMAmBDY2beAMbADbn0AwRGJbwOcA//xnyw5xX5pTgPUxrBFlQbIIwL2GmAeEZC+AQSyBAoe43IY7l08TjIHYKWWD/pd3QEypBT0POVpIwAAAABJRU5ErkJggg=="/><p>Youtube</p></a></li>
        </ul>
    <div class="content-footer">
<img src="images/main/logo-min.png" alt="Logo E.E.S.T N°5">
<p>Malvinas 1715, Libertad, Merlo (0220) 497-5100 Bs. As. Copyright © 2021
</p>    
</div>
</footer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ondrelat

Related Questions