Scroll only works on a div

Asked

Viewed 25 times

-2

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Astro</title>
        <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
    </head>
    <body>
        <div class="membros" style="overflow: auto;">
            <div class="metade1" style="height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 50px; left: 0; padding: 50px; background-color: black;">
                <div id="avatares" style="float: left;">
                    <div id="such" style="">
                        <img style=" border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;"
                        src="https://cdn.discordapp.com/avatars/740398084714135553/a_fd6c86a5108333255ccc248146708f9c.gif"
                    </div>
                    <div id="proud">
                        <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px; " src="https://cdn.discordapp.com/avatars/333388427053629441/03ca5ec0fbdb49a8d668bbe87364bd32.png"
                    </div>
                    <div id="magic">
                        <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/741857364113620992/a_c4ccd223f9d3ae8d7d49b51598a2225a.gif"
                    </div>
                    <div id="kettles">
                        <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/325275170572992514/a_9be814a7e2dd530f6c5004b5a8e7855e.gif"
                    </div>
                    <div id="kyo">
                        <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/287315272208089088/a_3005f36b83ccc267b66d1863b756d409.gif"
                    </div>
                    <div id="crumble">
                        <img style=" border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/739833577402925138/01138aa44ebeb4fd09a1d2343b45f13d.png"
                    </div>
                    <div id="hozz">
                        <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/721548699573944390/75abab6793c82fdfef9eecedf0af468a.png"
                    </div>
                </div>
            </div>
        </div>
        <div class="metade2" style="height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 50px; right: 0; padding: 50px; background-color: black;">
            <div class="avatares" style="float: right;">
                <div id="fiuza">
                    <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/420246215255654440/3aa25dd3e96e952db3cf5de4c0a6c580.png"
                </div>

                <div id="lord">
                    <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;;" src="https://cdn.discordapp.com/avatars/405415563834294272/156822b1b766b74e86c790e154383cff.png"
                </div>

                <div id="velvet">
                    <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/521405803383750658/d5db362ccedd3fa43c75450c1970756d.png"
                </div>

                <div id="jota">
                    <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/585135809967947881/b81c2304764cee530f2ee591a3d730ce.png"
                </div>

                <div id="guxx">
                    <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/786235501694812190/a_acacd71fe0ff1da18d65d1841fcd5534.gif"
                </div>

                <div id="yuki">
                    <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/762851689480454154/0bb12d547d6d100cea426ab62da27773.png"
                </div>

                <div id="res">
                    <img style="border-radius: 50%; padding: 1px; border: 4px solid transparent; background: white; margin-bottom: 20px;" src="https://cdn.discordapp.com/avatars/739928423199277149/a_afbaf6ac3521d10d6521423bb4f875f2.gif"
                </div>
            </div>
        </div>
    </body>
</html>

I’m starting at the front end, and basically, the scroll only goes down at the right, in other words div metade2.

html css

1 answer

2

Hello, I found some points to fix this problem.

1 - The img tags, need to be closed this way, this missing the closing of the tag />.

2 - Both Ivs are width: 50%, but when you add a 50px padding to each div, then they actually will not only have 50% but 50% plus 50px on each side, also above and below.

The reason srcroll doesn’t go all the way is that the padding is making the height of the div bigger than the scroll. to solve this add in both Divs metade1 and metade2 property: box-Sizing: border-box;

This will make the Divs respect the width and height you set for the div without increasing their sizes.

You can see more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.