I am using Bootstrap 5 and trying to display a calendar on a screen; however the height is about 25% longer than the screen height. How do I get the container height to fit to the screen height. I have also tried "height: 100%" and "height: 80%" in the css.

css

```
.sectionHeight {
    height: 100vh;
    width: auto;
}

```

html:

```
<div id="calendarAdmin"  class="container sectionHeight" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">

    <div id="includedContent"></div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-12 beta">
        <h3>Full Callendar</h3>

        <div style="text-align: center;">
            <span id="ajaxGetUserServletResponse1" style="color: red; background-color: white;"></span>
        </div>

        <div id="loader"><img src="images/spinner.gif"/></div><!-- loading spinner -->

        <div class="whiteBackground" id="calendar"></div>
    </div>
</div>

```