Height 100% question

[Tsmithcode]

so, when using height 100% it’s supposed to be 100% of the parent element and it works correctly for me. However, even when I set the html or body height to be 100% it doesn’t actually fill the ENTIRE page. It only goes until the end of the page and as soon as I scroll down, I can see it stops.

so, the 100% only fills the length of the un scrolled page and as soon as I scroll the height is no longer spreading. how do you actually set the height of an element to the ENTIRE scrolled page.

I’m really having a hard time figuring out how some of these things actually work because they are not making any sense.

[admit8490]

Hi. Can you provide some code example?
Looking at your question, I believe it could be some small CSS example, just couple of selectors.
Having such example around, for others it would be easier to help you.

[Tsmithcode]

    <div class="main-div">
        <div class="div1">
            <header>RS Stats</header>
                <img width="100px" src="https://img.guildedcdn.com/asset/GameIcons/OldSchoolRunescape-lg.png" alt="rs logo">
                    <ul>
                        <li><a href="#">Strength</a></li>
                        <li><a href="#">Strength</a></li>
                        <li><a href="#">Strength</a></li>
                        <li><a href="#">Strength</a></li>
                        <li><a href="#">Strength</a></li>
                        <li><a href="#">Strength</a></li>
                    </ul>

        </div>
        <div class="div2">
            <header>Runescape Stats</header>
                <h2>Strength</h2>
                    <p>generic strength description</p>
                    <h2>Strength</h2>
                    <p>generic strength description</p>
                    <h2>Strength</h2>
                    <p>generic strength description</p>
                    <h2>Strength</h2>
                    <p>generic strength description</p>
                    <h2>Strength</h2>
                    <p>generic strength description</p>
                    <h2>Strength</h2>
                    <p>generic strength description</p>
                    <h2>Strength</h2>
                    <p>generic strength description</p>
                    <h2>Strength</h2>
                    <p>generic strength description</p>
                    <h2>Strength</h2>
                    <p>generic strength description</p>
                    

        </div>
    </div>```

```html, body {
    height: 100%;
}

.main-div {
    display: flex;
    height: 100%;
}

.div1 {
    background-color: aqua;
    width: 100px;
    height: 100%;
}

.div2 {
    background-color: aquamarine;
    width: 100px;
    height: 100%;
}```