100% height Sidebar and a Footer who wont stay below it - html

Question

I need help with a combination of a sticky footer, and a content area that has a sidebar.
Here's a code snippet:
html, body {
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>
It looks something like this,
My problem is that I need the sidebar (see the hyperlinks) to stretch all the way to the footer (Its supposed to have a thin border on the right) and I also need the footer to not lift up off the bottom of the window when the content is short.
P.S. I'm using bootstrap if that helps.
Please help, thank you.

Answer 1

Here is a layout that I think represents what you're going for - check out the jsFiddle link and resize the page. You can see that for short content, the footer lays at the bottom of the page. For longer content, the content pushes the footer down past the bottom of the page and the page scrolls.
Solution adapted from the code in this article. The only caveat is that for this solution to work, the footer needs to have a fixed height (in this case 60px).
JSFiddle: https://jsfiddle.net/2gcxvjms/
Live Demo:
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

Here's a version of your layout using navbars fixed to the top and a fixed-sidebar so your main-content scrolls under everything. Then you can layer the sidebar and footer to either be over or under one another. Right now it looks attached but the CSS is easily changed so one could cover the other.
The sidebar is hidden on viewports under 360px but can be restored by removing to media query.
Hope it helps.
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>Action
</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>Action
</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>Action
</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"> Menu Item <span class="caret"></span>
<ul class="dropdown-menu">
<li>Menun Item 1
</li>
<li>Menun Item 2
</li>
</ul>
</li>
<li class="dropdown"> Menu Item <span class="caret"></span>
<ul class="dropdown-menu">
<li>Menun Item 1
</li>
<li>Menun Item 2
</li>
</ul>
</li>
<li class="dropdown"> Menu Item <span class="caret"></span>
<ul class="dropdown-menu">
<li>Menun Item 1
</li>
<li>Menun Item 2
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="sidebar-fixed">
<ul class="sidebar-list">
<li> About
</li>
<li> Contact
</li>
<li> Products
</li>
<li> Blog
</li>
</ul>
</div>
<div class="main-content">
<div class="container-fluid">
<div class="well"> Bootstrap 3
</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>Copyright © 2015
</li>
</ul>
</div>
</footer>

Answer 3

So from my comments I made a very simple version to show how little code is needed to achieve what you want
Edit:
Updated my code sample to a snippet instead of a fiddle.
And this sample can be upgraded to use flex with a few changes of the 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">
<h1>Site Title</h1>
</div>
</header>
<header class="page-row">
<div class="header-inner">
<h1>Sub Site Title</h1>
</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>
</div>
</footer>