css - Bootstrap 页脚隐藏其上方的内容

Question

我在 asp.net mvc 5 中使用 Bootstrap。我在底部看到了页脚，这是来自 Bootstrap。我的问题是；在视口(viewport)上，例如 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>