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固定頁眉和頁腳具有可摺疊側邊欄

回答

相關問題