Height 100% not working with addition of scroll button (HTML and CSS)

Question

I had a portion of my website that was at height 100% with no problem. However, when I added the section property around it so I could use a button to scroll to it, the portion of the website no longer held the height 100% perimeters. Please let me know how I can use a scroll button and maintain height 100% for that portion of the page.

I added height 100% to all the parental elements. I don't know what else I can do. Please let me know.

HTML:

<section id="virtualtoursection">
    <div class="virtualtourtext">
        <h2 class="virtualtourtitle">
            Take a Virtual Tour!
        </h2>
        <p class="virtualtourmaintext">
            Step into a world of possibilities with our immersive virtual tour. Explore every corner of our stunning apartments from the comfort of your own home. Get ready to embark on a captivating journey that will help you find the perfect place to call home.
        </p>
    </div>
</section>

CSS:

.virtualtoursection{
    height: 100%;
}
.virtualtourtext {
    background-color: white;
    width: 50%;
    height: 100%;
    float: right;
    text-align: center;
}
.virtualtourtitle {
    margin-bottom: 50px;
}
.virtualtourmaintext {
    line-height: 1.7;
}

THANK YOU!!!!!!