引导页脚隐藏其上方的内容答案

【问题标题】：bootstrap footer hiding contents above it引导页脚隐藏其上方的内容
【发布时间】：2013-12-22 07:23:28
【问题描述】：

我在 asp.net mvc 5 中使用 Bootstrap。我的页脚在底部，这是来自 Bootstrap。我的问题是；在视口上，例如 400px 高度，粘性页脚将内容/ div（中间主体）隐藏在其上方。

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

第二个解决方案@我有我自己的自定义 jQuery 插件，它丢失了一个谜题，当用户点击 Glyphicons (bootstarp) 时我需要捕获事件

非常感谢

【问题讨论】：

标签： css asp.net-mvc html twitter-bootstrap

【解决方案1】：

对此的常见解决方案是在页脚高度的尺寸中添加填充到正文或#body_main_wrapper。但这只有在您知道（或可以很好地猜测）您的页脚高度时才有效。否则，添加一行 js 来检查页脚的高度并添加那么多的填充。

但我认为只有一行版权，你知道的 :)

【讨论】：

我找到了解决方案...看下面

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个

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

将上述类应用到您的容器中，如

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

【讨论】：

【解决方案4】：

如果您使用的是 Bootstrap 4，只需将 mb-5 类添加到相关 div 中即可。

查看有关间距的信息here

【讨论】：