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 footer hides the contents/ div (middle body) above it.

  <div id="body_main_wrapper">
        <!--Functions Panel Wrapper (left-side)-->
        <div class="Functions_Panel_Wrapper">
            functions lists.....
        </div>

        <!--Functions Page Wrapper (right-side)-->
        <div class="Function_Page_Wrapper">
            @RenderBody()
        </div> <!--end Function_Page_Wrapper-->

        <br/><br/>
        xxxxxxxxx
        <br /><br />
        fffffffffff
        <br /><br /><br /><br /><br /><br /><br /><br />
        yyyyyyyyyyyy

    </div> <!--end body_main_wrapper-->

        <!--*************************** Footer ***********************************-->
        <div class="footer_wrapper navbar navbar-default navbar-fixed-bottom">
            <footer>
                <div class="container">
                    <div class="footer_Title_Wrapper">
                        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                    </div> <!--end footer_Title_Wrapper-->
                </div> <!--end container-->
            </footer>
        </div><!--end footer_wrapper-->
    </div> <!--end body-content-->

2nd solution@ i have my own custom jQuery plugin, which got one missing puzzle, i need to capture event when user click on Glyphicons (bootstarp)

Many Thanks

回答1:

Try this

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

Apply above classes into your container, as

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

回答2:

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 :)

回答3:

(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);

回答4:

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

Check out the info about spacing here

来源：https://stackoverflow.com/questions/20398549/bootstrap-footer-hiding-contents-above-it

标签

css

asp.net-mvc

html

twitter-bootstrap