100％身高側邊欄和頁腳誰不會停留在它下方

Question

我需要一個粘性頁腳和具有側邊欄的內容區域的組合幫助。

這裏有一個代碼片段：

html, body { 
 
\t height: 100%; 
 
} 
 

 
/* Force Footer to Stay Down */ 
 
#outtermost-wrapper { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    margin: 0 auto -50px; 
 
} 
 

 
.container-fluid { 
 
    max-width: 960px; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px dotted pink; 
 
} 
 

 
#page-header { 
 
    border: 3px dotted blue; 
 
} 
 

 
.chart-nav { 
 
    border: 2px solid green; 
 
} 
 

 
#page-content { 
 
    border: 3px dashed green; 
 
} 
 

 
.chart-sidebar-wrapper { 
 
    width: 145px; 
 
} 
 

 
.faux-sidebar-wrapper { 
 
    background-color: #E8E8E8; 
 
    min-height: 100px; 
 
    position: absolute; 
 
    top: 55px; /* Top Nav + Chart Nav Heights (ESTIMATED FOR THIS EXAMPLE)*/ 
 
    bottom: 50px; /* Footer Height */ 
 
    width: 100%; 
 
} 
 

 
nav.navbar-default { 
 
    margin-bottom: 50px; 
 
    width: 100%; 
 
} 
 

 
.faux-sidebar { 
 
    margin: 0 0 0 155px; 
 
    padding: 0; 
 
    position: relative; 
 
    height: 100%; 
 
    background-color: #F8F8F8; 
 
    border-left: 1px solid fuschia; 
 
    min-height: 100px; 
 
} 
 

 
.footer-push { 
 
    clear: both; 
 
    border: 3px solid pink; 
 
    height: 50px; 
 
} 
 

 
#page-footer { 
 
    width: 100%; 
 
    height: 50px; 
 
    border: 3px solid red; 
 
}

<div id="outtermost-wrapper"> 
 
    <div id="page-header" class="container-fluid"> 
 
     HEADER - Blue Dotted - Stays at the top 
 
    </div> 
 
    <div id="page-content" class="container-fluid"> 
 
     <div class="chart-nav"> 
 
      SUB HEADER - Green Solid - Stays at the top 
 
     </div> 
 
     
 
     <div class="faux-sidebar-wrapper"> 
 
    
 
      <div class="chart-sidebar-wrapper"> 
 
       <nav class="navbar-default navbar-static-side"> 
 
        <ul class="nav metismenu"> 
 
         <li>Menu Item</li> 
 
         <li>Menu Item</li> 
 
         <li>Menu Item</li> 
 
        </ul> 
 
       </nav> 
 
      </div> 
 
    
 
      <div class="faux-sidebar"> 
 
       <div class="row main"> 
 
        <div>Actual Page Content with Widgets and What Not</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="footer-push"></div> 
 
    </div> 
 
</div> 
 
<div id="page-footer" class="container-fluid"> 
 
    FOOTER - Red Solid - Stay below the and not lift off the bottom of the page for short content. 
 
</div>

它看起來像這樣，

我的問題是我需要的側邊欄（請參閱超鏈接）一直延伸到頁腳（它應該在右側有一個薄邊框），而且當頁面內容很短時，我還需要頁腳不要從窗口底部擡起。

P.S.如果有幫助，我使用bootstrap。

請幫忙，謝謝。

Answer 1

下面是我認爲代表你要做的一個佈局 - 查看jsFiddle鏈接並調整頁面大小。您可以看到，對於短內容，頁腳位於頁面的底部。對於較長的內容，內容會將頁腳向下推到頁面底部，並且頁面會滾動。

解決方案改編自this article中的代碼。唯一需要注意的是，要使此解決方案有效，頁腳需要有一個固定的高度（在本例中爲60px）。

的jsfiddle：https://jsfiddle.net/2gcxvjms/

現場演示：

html, body { 
 
    margin:0; 
 
    padding:0; 
 
    height:100%; 
 
} 
 
#container { 
 
    min-height:100%; 
 
    position:relative; 
 
} 
 
#header { 
 
    background:#ff0; 
 
    padding:10px; 
 
} 
 
#subheader { 
 
    padding: 10px; 
 
    background: lightblue; 
 
} 
 
#body { 
 
    padding-bottom:60px; 
 
    overflow: auto; 
 
    /* Height of the footer */ 
 
} 
 
#footer { 
 
    position:absolute; 
 
    bottom:0; 
 
    width:100%; 
 
    height:60px; 
 
    /* Height of the footer */ 
 
    background:#6cf; 
 
} 
 
/* other non-essential CSS */ 
 
#header p, #header h1 { 
 
    margin:0; 
 
    padding:10px 0 0 10px; 
 
} 
 
#footer p { 
 
    margin:0; 
 
    padding:10px; 
 
} 
 

 
#c1 { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
#c2 { 
 
    float: left; 
 
    width: 50%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
     <h1>Header 1 Text</h1> 
 
    </div> 
 
    <div id="subheader"> 
 
     <h2>Header 2 Text</h2> 
 
    </div> 
 
    <div id="body"> 
 
     <div id="c1"> 
 
      Column 1 Text<br /> 
 
      Column 1 Text<br /> 
 
      Column 1 Text<br /> 
 
      Column 1 Text<br /> 
 
      Column 1 Text<br /> 
 
      Column 1 Text<br /> 
 
     </div> 
 
     <div id="c2"> 
 
      Column 2 Text<br /> 
 
      Column 2 Text<br /> 
 
      Column 2 Text<br /> 
 
      Column 2 Text<br /> 
 
      Column 2 Text<br /> 
 
      Column 2 Text<br /> 
 
     </div> 
 
    </div> 
 
    <div id="footer"> 
 
     Footer Text 
 
    </div> 
 
</div>

Answer 2

下面是使用navbars固定頂端佈局的一個版本fixed-sidebar所以你main-content下的一切春聯。然後，您可以將側邊欄和頁腳分層疊加或疊加。現在它看起來很貼切，但CSS很容易改變，所以可以覆蓋另一個。

邊欄隱藏在360px以下的視口中，但可以通過移除到媒體查詢進行恢復。

希望它有幫助。

body, 
 
html { 
 
    position: relative; 
 
    margin-top: 125px; 
 
    margin-bottom: 50px; 
 
} 
 
.navbar.navbar-custom { 
 
    border-radius: 0px; 
 
    border: none; 
 
    background: #337ab7; 
 
    border-bottom: 1px solid #ff0; 
 
} 
 
.navbar-custom .upper-nav { 
 
    font-size: 20px; 
 
    padding: 9px 20px; 
 
    height: 50px; 
 
    color: #337ab7; 
 
    background-color: #fff; 
 
} 
 
.navbar-custom .upper-nav img { 
 
    margin-top: 0px; 
 
} 
 
.navbar-custom .navbar-nav { 
 
    margin-right: 30px; 
 
} 
 
.navbar-custom .nav-buttons { 
 
    border-radius: 0px; 
 
    background: none; 
 
    border: none; 
 
    color: #337ab7; 
 
} 
 
.navbar.navbar-custom .btn-group .dropdown-menu > li > a { 
 
    color: #fff; 
 
} 
 
.navbar.navbar-custom .btn-group .dropdown-menu > li > a:hover { 
 
    color: #444; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li > a { 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.navbar.navbar-custom .navbar-brand { 
 
    color: #fff; 
 
} 
 
.navbar.navbar-custom .dropdown-menu { 
 
    background: #266080; 
 
} 
 
.navbar-custom .navbar-nav .open .dropdown-menu > li > a, 
 
.navbar-custom .navbar-nav .open .dropdown-menu { 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.navbar-custom .navbar-nav .open .dropdown-menu > li >a:hover, 
 
.navbar-custom .navbar-nav .open .dropdown-menu:hover { 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.navbar.navbar-custom .navbar-toggle, 
 
.navbar.navbar-custom .navbar-toggle:focus, 
 
.navbar.navbar-custom .navbar-toggle:hover { 
 
    background: none; 
 
    outline: none; 
 
    box-shadow: none; 
 
    border: none; 
 
    color: #fff; 
 
} 
 
.sidebar-fixed { 
 
    margin-top: 100px; 
 
    padding: 5px 18px; 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: #337ab7; 
 
    border-right: 1px solid #ff0; 
 
    z-index: 1500; 
 
} 
 
ul.sidebar-list { 
 
    list-style: none; 
 
    display: inline; 
 
    text-align: left; 
 
} 
 
ul.sidebar-list > li { 
 
    font-size: 18px; 
 
    padding-bottom: 25px; 
 
} 
 
ul.sidebar-list > li > a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.main-content .well { 
 
    background-color: transparent; 
 
    border: 3px solid #428bca; 
 
    border-radius: 0px; 
 
    text-align: center; 
 
    font-size: 25px; 
 
} 
 
.main-content { 
 
    margin-left: 200px; 
 
} 
 
.footer { 
 
    vertical-align: center; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #337ab7; 
 
    padding: 12px 0; 
 
    z-index: 3100; 
 
} 
 
ul.footer-nav > li { 
 
    margin-top: 5px; 
 
    list-style: none; 
 
    vertical-align: center; 
 
    text-align: right; 
 
} 
 
ul.footer-nav > li > a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
@media (max-width: 768px) { 
 
    .navbar-custom .navbar-nav { 
 
    margin-right: 0; 
 
    } 
 
    .navbar-custom .navbar-nav > li > a { 
 
    color: #fff; 
 
    } 
 
    .sidebar-fixed { 
 
    margin-top: 104px; 
 
    width: 100px; 
 
    } 
 
    .main-content { 
 
    margin-left: 100px; 
 
    padding: 0; 
 
    } 
 
    ul.sidebar-list > li { 
 
    font-size: 14px; 
 
    padding-bottom: 25px; 
 
    } 
 
    .navbar-custom .navbar-collapse { 
 
    margin-left: 100px; 
 
    border: none; 
 
    } 
 
} 
 
@media (max-width: 360px) { 
 
    .sidebar-fixed { 
 
    display: none; 
 
    } 
 
    .main-content { 
 
    margin-left: 0; 
 
    padding: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation"> 
 
    <div class="upper-nav"> 
 
     <img src="http://placehold.it/150x30/337ab7/fff?text=Logo" alt="" /> 
 
     <div class="btn-group pull-right"> 
 
     <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-user" </span> 
 
     </button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="btn-group pull-right"> 
 
     <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-inbox" </span> 
 
     </button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="btn-group pull-right"> 
 
     <button type="button" class="btn btn-default dropdown-toggle nav-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-off" </span> 
 
     </button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-plus"></span> 
 
     </button> <a class="navbar-brand" href="#">Home</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Menun Item 1</a> 
 
      </li> 
 
      <li><a href="#">Menun Item 2</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Menun Item 1</a> 
 
      </li> 
 
      <li><a href="#">Menun Item 2</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu Item <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Menun Item 1</a> 
 
      </li> 
 
      <li><a href="#">Menun Item 2</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container-fluid"> 
 
    <div class="sidebar-fixed"> 
 
    <ul class="sidebar-list"> 
 
     <li> <a href="#"> About</a> 
 
     </li> 
 
     <li> <a href="#"> Contact</a> 
 
     </li> 
 
     <li> <a href="#"> Products</a> 
 
     </li> 
 
     <li> <a href="#"> Blog</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="main-content"> 
 
    <div class="container-fluid"> 
 
     <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
 
     </div> 
 
     <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux 
 
     de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce 
 
     à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition 
 
     et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a 
 
     pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, 
 
     et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p> 
 
     <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux 
 
     de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce 
 
     à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition 
 
     et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a 
 
     pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, 
 
     et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p> 
 
     <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux 
 
     de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce 
 
     à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition 
 
     et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a 
 
     pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, 
 
     et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<footer class="footer"> 
 
    <div class="container"> 
 
    <ul class="footer-nav"> 
 
     <li><a href="#">Copyright &#169; 2015</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</footer>

Answer 3

所以從我的意見，我做了一個非常簡單的版本顯示多麼少的代碼是需要實現你想要的

編輯： 更新了我的代碼示例一片段而不是小提琴。

並且可以將此示例升級爲使用flex，並對html/css進行一些更改。

html, 
 
body { height: 100%; margin: 0 } 
 

 
body, .main-inner { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100% 
 
} 
 

 
.page-row { 
 
    display: table-row; 
 
    height: 1px; 
 
} 
 

 
.page-row-expanded { height: 100%; } 
 

 
.item1, .item2 { 
 
    width: 29%; 
 
    box-sizing: border-box; 
 
    display: table-cell; 
 
    height: 100% 
 
} 
 
.item2 { 
 
    width: 70%; 
 
} 
 

 
.header-inner, .footer-inner, .item1, .item2 { 
 
    border: 1px solid black 
 
}

<header class="page-row"> 
 
    <div class="header-inner"> 
 
\t \t <h1>Site Title</h1> 
 
\t </div> 
 
</header> 
 

 
<header class="page-row"> 
 
    <div class="header-inner"> 
 
\t \t <h1>Sub Site Title</h1> 
 
\t </div> 
 
</header> 
 

 
<main class="page-row page-row-expanded"> 
 
    <div class="main-inner">   
 
     <div class="item1"> 
 
     Menu 
 
     </div> 
 
     <div class="item2"> 
 
     Sample <br> 
 
     Content <br> 
 
     </div> 
 
    </div> 
 
</main> 
 

 
<footer class="page-row"> 
 
    <div class="footer-inner"> 
 
    <p>Copyright, blah blah blah.</p> 
 
\t </div> 
 
</footer>