Question

我在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）时捕获事件

非常感谢

Answer 1

试试这个

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

Answer 2

通常的解决方案是在页脚高度的维度中添加填充到主体或#body_main_wrapper。但只有当你知道（或者可以很好地猜测）页脚的高度时，这才有效。否则，添加一行js，检查页脚的高度并添加多少填充。

但我认为只有一行版权，你知道：）

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

Answer 4

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

查看有关间距here的信息

bootstrap页脚隐藏在它上面的内容

4 个答案: