Bootstrap固定页眉和页脚具有可折叠侧边栏

我正在使用可折叠侧边栏在内容区域中处理固定页眉和页脚的布局。目前它工作得很好，但有一些我不能理解的小怪癖。Bootstrap固定页眉和页脚具有可折叠侧边栏

当边栏被切换关闭的主体内容捕捉到它的100％的宽度，并显示在底部的滚动条，直到它完成坍塌。我想要的内容要么是宽度补间一样的侧边栏或只是有overflow-x隐藏，所以它根本不显示滚动条。
我希望页脚成为动态高度。我将根据数据库查询加载不同的内容，并且我抽取的条目数量将决定页脚的高度。目前它锁定在60px。

至于第一个问题，我已经尝试添加overflow-x隐藏到各种元素没有成功。第二个问题稍微复杂一点。我已经尝试了一些CSS calc（）操作，但到目前为止没有任何工作。

这里是我的代码，如果你想测试一下你需要bootstrap.min.css，bootstrap.min.js和的jquery.js。我试着设置一个Codepen或Bootply的例子，但它不适用于可折叠的侧边栏。

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Calendar</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/frame.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <div id="wrapper"> 
     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li class="sidebar-brand"> 
        <a href="#"> 
         Start Bootstrap 
        </a> 
       </li> 
       <li> 
        <a href="#">Dashboard</a> 
       </li> 
       <li> 
        <a href="#">Shortcuts</a> 
       </li> 
       <li> 
        <a href="#">Overview</a> 
       </li> 
       <li> 
        <a href="#">Events</a> 
       </li> 
       <li> 
        <a href="#">About</a> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /#sidebar-wrapper --> 

     <header>header</header> 
     <!-- Page Content --> 
     <div id="page-content-wrapper"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-12"> 

         <h1>Simple Sidebar</h1> 
         <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
         <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
         <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 

        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /#page-content-wrapper --> 
     <footer>footer</footer> 
    </div> 
    <!-- /#wrapper --> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

    <!-- Menu Toggle Script --> 
    <script> 
    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
     $("header").toggleClass("toggled"); 
     $("footer").toggleClass("toggled"); 
    }); 
    </script> 

</body> 

</html>

CSS（从Frame.css）

/* Header Footer Styles */ 
header { 
    width: 100%; 
    height: 60px; 
    background: red; 
    position: fixed; 
    top: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
header.toggled { 
    width: calc(100% - 250px); 
} 

footer { 
    width: 100%; 
    height: 60px; 
    background: red; 
    position: fixed; 
    bottom: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
footer.toggled { 
    width: calc(100% - 250px); 
} 

/* Toggle Styles */ 

#wrapper { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
#wrapper.toggled { 
    padding-left: 250px; 
} 

#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 250px; 
    width: 0; 
    height: 100%; 
    margin-left: -250px; 
    overflow-y: auto; 
    background: #000; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width: 250px; 
    overflow-x: hidden; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    margin-top:60px; 
    max-height: calc(100% - 120px); 
    overflow-y: auto; 
} 

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -250px; 
    width: calc(100% - 250px); 
} 

/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
}

来源

2016-03-03 Tim Troiano

这是一个有点哈克，但对于问题1，你可以尝试添加以下到您的点击功能：

$("body").css("overflow-x", "hidden"); 
setTimeout(function(){$("body").css("overflow-x", "auto");}, 1500);

对于问题2，您可以删除高度。

更新：对不起，我想我误会了问题2.我能想到的（也是黑客攻击的一位）的唯一的解决办法是让jQuery的计算，并将其设置在页面加载时：

$(document).ready(function() { 
    var currentFooterHeight = $('footer').css('height'); 
    var newContentHeight = 'calc(100vh - 60px - ' + currentFooterHeight + ')'; 
    $('#page-content-wrapper').css('height', newContentHeight); 
})

Updated Bootply

来源

2016-03-04 11:08:50

伟大的解决方案！如果你有一分钟可以请你帮我理解这些js函数的工作原理吗？对于第一个，它看起来像设置身体溢出x为隐藏，然后在超时后回到自动。如果能解决问题，我是否有任何理由不总是希望它始终隐藏起来？高度函数是有道理的，但我想知道你从哪里得到100vh-60px。感谢您的帮助！ –

你有第一个权利。您可以将其设置为隐藏，但如果您的内容比窗口更宽（特别是在像手机这样的小设备上），用户将无法看到它。就个人而言，我宁愿将其设置回自动，除非有另一个理由永久隐藏它。 –

对于第二个，100vh是视图高度的100％。从这里，我减去标题的高度，以及页脚的当前高度，这使得我的内容高度在两者之间。 –

Bootstrap固定页眉和页脚具有可折叠侧边栏

回答

相关问题