Content Div 100% Height Minus Dynamic Height Of Footer Div

Question

I am using Bootstrap 4, and I have a pretty complex footer:

...that adjusts its height dynamically. This is a PHP application, so the content in the center of the screen changes. When the content is bigger than the screen, it pushes the footer to the bottom as desired. However, I have scenarios where the content is pretty small and then the footer has whitespace underneath it.

I also have a header.

How can I use CSS to adjust the bootstrap classes so that if (and only if) the height of the content plus the height of the footer is not 100% of the viewport height, it expands the content so that it is?

Here is what it looks like currently:

As you can see, the whitespace is at the bottom of the screen below the footer. I do not want to make a sticky footer and scroll in the middle, I just want the footer to be at the bottom of the screen if the content in between the header and footer isn't taking up the remaining height.

Everything I've seen so far requires you to fix the height of the footer but then I fear the footer will not respond properly on different screen sizes.

Here is my general HTML layout, with bootstrap classes:

    <body>
    <!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top top-nav-collapse">
        <div class="container">
            <!-- Navbar brand -->
            <a class="navbar-brand" href="https://dization.com/" target="_blank"><img src="../public/images/cropped-logo_white.png" width="185" height="58px"></a>

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
    <!--/.Navbar-->



    <!--Main layout-->
    <main class="mt-4">
        <div class="container">
               <div class="row justify-content-center" id="divCardSignUp">
                    <div class="col-lg-12">
                        <div class="card my-5">
                            <!-- Logo -->
                            <div class="card-header pt-4 pb-4 text-center bg-light">
                                    <span><img src="../public/images/Logo-no-text.png" alt="" height="30"></span>
                            </div>

                            <div class="card-body p-4">
                              
                                  <!-- boot strap rows and cols divs in here -->
                                  
                            </div> 
                        </div>
                        <!-- end card -->
                    </div> <!-- end col -->
                </div>
        </div>
    </main>
    <!--Main layout-->

    <!-- Footer -->
    <footer class="page-footer font-small unique-color-dark mt-2">

        <!-- Social buttons -->
        <div class="primary-color">
            <div class="container"></div>
        </div>
        <!-- Social buttons -->

        <!--Footer Links-->
        <div class="container mt-5 mb-4 text-center text-md-left">
            <div class="row mt-3"></div>
        </div>
        <!--/.Footer Links-->

        <!-- Copyright -->
        <div class="footer-copyright text-center py-3"></div>
        <!-- Copyright -->

    </footer>
    <!-- Footer -->


</body>

Here is the only custom CSS I added to the page:

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

body {
    padding-top: 70px;
}

Any help would be appreciated.

Thanks.

Does this answer your question? [CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b) — gru, Jan 28 '22 at 08:26
So far, the first few solutions don't seem to do the trick...I wouldn't think that this would be that complicated, but then again, every time it comes to HTML and CSS I think that and it is. Thanks for sharing, I'll keep looking in that thread. — Rob Santoro, Jan 28 '22 at 14:10
Could you share a minimal example or share an URL? then I could take a look at it. — gru, Jan 28 '22 at 15:22
Not really, could you deploy your website somewhere? For example https://www.netlify.com/ or https://pages.github.com/? — gru, Jan 28 '22 at 15:36

score 0 · Answer 1 · answered Jan 28 '22 at 17:55

Ok, I solved this problem with probably not the most elegant of solutions, but it works for me.

I used a combination of Javascript and CSS as I could not figure out a CSS-only trick.

Again, my biggest constraint is that the footer dynamically changes size based on the screen size, AND the content in the main section changes based on what the server serves. Sometimes the content is large which will require the user to scroll to see the footer (I do not want a sticky footer), and sometimes the content is small which means the footer was showing up right below the content and there was whitespace at the bottom of the footer. Again, I'm using bootstrap 4.5 classes and the only other CSS is listed below.

In order to fix the whitespace, and not use a sticky footer, here is what I did.

CSS:

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

body {
    padding-top: 70px;
}

HTML shell code is the same as it was above:

<body>
    <!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top top-nav-collapse">
        <div class="container">
            <!-- Navbar brand -->
            <a class="navbar-brand" href="https://dization.com/" target="_blank"><img src="../public/images/cropped-logo_white.png" width="185" height="58px"></a>

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
    <!--/.Navbar-->



    <!--Main layout-->
    <main class="mt-4">
        <div class="container">
               <div class="row justify-content-center" id="divCardSignUp">
                    <div class="col-lg-12">
                        <div class="card my-5">
                            <!-- Logo -->
                            <div class="card-header pt-4 pb-4 text-center bg-light">
                                    <span><img src="../public/images/Logo-no-text.png" alt="" height="30"></span>
                            </div>

                            <div class="card-body p-4">
                              
                                  <!-- boot strap rows and cols divs in here -->
                                  
                            </div> 
                        </div>
                        <!-- end card -->
                    </div> <!-- end col -->
                </div>
        </div>
    </main>
    <!--Main layout-->

    <!-- Footer -->
    <footer class="page-footer font-small unique-color-dark mt-2">

        <!-- Social buttons -->
        <div class="primary-color">
            <div class="container"></div>
        </div>
        <!-- Social buttons -->

        <!--Footer Links-->
        <div class="container mt-5 mb-4 text-center text-md-left">
            <div class="row mt-3"></div>
        </div>
        <!--/.Footer Links-->

        <!-- Copyright -->
        <div class="footer-copyright text-center py-3"></div>
        <!-- Copyright -->

    </footer>
    <!-- Footer -->
</body>

And here is the JS I added before the body closing tag:

    <script language="JavaScript">
        function footerAlign() {
            //Get the height of the footer
            var footerHeight = $('footer').height();
            //Get the height of the nav bar
            var navHeight = $('nav').height();

            //Set the min-height of the content to 100% of the viewport height minus the heights of the footer and the nav and in my case 32 px of padding.
            $('main').css('min-height', 'calc(100vh - ' + (footerHeight + navHeight + 32)  + 'px');
        }

        $(document).ready(function() {        
             footerAlign();
        });

        $(window).resize(function() {
            footerAlign(); 
        });
    </script>

Content Div 100% Height Minus Dynamic Height Of Footer Div

1 Answers1