Bootstrap Footer Hiding Contents Above It

I am using Bootstrap in asp.net mvc 5. I got footer that is sticking down at the bottom, this is from Bootstrap. My issue is; on viewport say example 400px height, the sticky foote

Solution 1:

Try this

.container-if-fixed-header
 {
    margin-top:50px;
}
.container-if-fixed-footer
{
    margin-bottom:55px;
}

Apply above classes into your container, as

<divclass="navbar navbar-fixed-top"><divclass="container"><!--HEADER content here--></div></div><divclass="container container-if-fixed-header container-if-fixed-footer"><!--BODY content here--><divclass="navbar navbar-default navbar-fixed-bottom"><divclass="container"><!--FOOTER content here--><p>&copy; Company</p></div></div></div>

Solution 2:

If you're using Bootstrap 4, just add the mb-5 class to the div in question.

Check out the info about spacing here

Solution 3:

The common solution to this is adding padding in the dimensions of your footers height to the body or the #body_main_wrapper. But this works only if you know (or can make a good guess) the height of your footer. Otherwise, add a one liner of js that checks for the height of the footer and adds that much padding.

But I think with a one line copyright, you know it :)

Solution 4:

(function ($) {

$.fn.adjust_BodyMainWrapper_Height = function () {

    $(window).bind('load resize', function () {

        var viewport_height = $(window).height();

        var viewport_width = $(window).width();

        var footerHeight = $('.footer_wrapper').height();

        var footerTop = $('.footer_wrapper').position().top + footerHeight;

        if (footerTop < viewport_height) {
            $('.footer_wrapper').css('margin-top', 10 + (viewport_height - footerTop) + 'px');
        }

        $(".navbar-toggle").click(function () {
            if (footerTop < viewport_height) {
                $('.footer_wrapper').css('margin-top', 10 + (viewport_height - footerTop) + 'px');
            }
        });          

    });    
};
})(jQuery);