Sidebar not going full height of page - css

Question

I have a side bar called column left. for some reason it does not go the full height of page when I have extra panels on view.
I use bootstrap with it as well with a fixed navbar at top.
Question: Why is it side bar "column left" not going full height what every page size is. What would be the best solution to solve it?
Codepen preview
Code View http://codepen.io/riwakawebsitedesigns/pen/bdaGro/
Full View http://codepen.io/riwakawebsitedesigns/full/bdaGro/
#import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);
/* Global */
body {
/*height: 100%;*/
margin: 0;
/*min-height: 100% !important;*/
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
padding-top: 70px;
width: 100%;
}
#user-bar-chart {
height: 300px;
}
#client-bar-chart {
height: 300px;
}
a,
a:hover,
a:focus {
cursor: pointer;
text-decoration: none;
}
tr:hover a.dashboard-user:after {
font-family: FontAwesome;
content: "\f044";
font-size: 14px;
}
/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
display: inline;
}
/* Layout */
.container-fluid {
padding-left: 20px;
padding-right: 20px;
}
#content {
padding-bottom: 40px;
transition: all 0.3s;
}
/* Column Left */
#column-left {
width: 50px;
min-height: 100% !important;
background-color: #515151;
position: absolute;
top: 0px;
padding-top: 100px;
z-index: 10;
transition: all 0.3s;
}
#column-left + #content {
margin-left: 50px;
}
#column-left + #content + #footer {
margin-left: 50px;
}
#media (max-width: 767px) {
#column-left {
overflow: hidden;
display: none;
}
#column-left + #content {
margin-left: 0;
}
#column-left + #content + #footer {
margin-left: 0;
}
}
/* Column Left Active */
#column-left.active {
width: 235px;
display: block;
}
#media (min-width: 768px) {
#column-left.active {
overflow: auto;
}
#column-left.active + #content {
margin-left: 235px;
}
#column-left.active + #content + #footer {
margin-left: 235px;
}
}
#media (max-width: 767px) {
#column-left.active + #content {
position: relative;
left: 235px;
}
#column-left.active + #content + #footer {
position: relative;
left: 235px;
}
}
#column-left.active {
width: 235px;
}
#column-left.active #menu li i {
font-size: 14px;
}
#column-left.active #menu > li > a > span {
display: inline;
}
#column-left.active #menu > li > ul {
position: relative;
left: auto;
top: auto;
width: auto;
visibility: visible;
}
/* Top Navbar */
.menu {
background: #eeeeee none repeat scroll 0 0;
}
.navbar {
background-color: #fff !important;
border: 0 none;
border-radius: 0;
color: #666;
margin-bottom: 0;
}
.navbar.navbar-shadow {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}
#button-menu {
display: inline-block;
cursor: pointer;
color: #6D6D6D;
}
#media (max-width: 640px) {
.navbar-brand {
font-size: 14px;
padding: 15px 7px;
}
}
/* Sidebar Menu */
#menu,
#menu ul,
#menu li {
padding: 0;
margin: 0;
min-height: 100%;
list-style: none;
}
#menu {
margin-bottom: 25px;
}
#menu > li {
position: relative;
}
#menu li a {
text-decoration: none;
display: block;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #515151;
}
#menu li a i {
font-size: 16px;
}
#menu > li > a {
color: #C4C4C4;
font-size: 14px;
padding-left: 13px;
border-bottom: 1px solid #585858;
}
#menu > li > a:hover {
background-color: #444444;
}
#menu > li > a > span {
display: none;
margin-left: 8px;
}
#menu li li a {
color: #9d9d9d;
}
#menu li li a:hover {
color: #FFFFFF;
background-color: #373737;
}
#menu li li a:before {
content: "\f101";
font-size: 14px;
font-family: FontAwesome;
margin-left: 10px;
margin-right: 10px;
transition: margin ease 0.5s;
}
#menu li li a:hover:before {
margin-right: 20px;
}
#menu > li.active > a {
color: #DDDDDD;
background: #373737;
}
#menu li.active li a {
color: #C4C4C4;
}
#menu li li.active > a:last-child {
color: #FFFFFF;
}
#menu li li.active a:last-child:before {
margin-left: 20px;
margin-right: 10px;
}
#menu > li > ul {
position: absolute;
left: 50px;
top: 0px;
width: 210px;
background-color: #444444;
visibility: hidden;
}
#menu li ul {
overflow: hidden;
}
#menu > li:hover > ul {
visibility: visible;
}
#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}
#menu li ul a {
padding-left: 20px;
}
#menu li li ul a {
padding-left: 40px;
}
#menu li li li ul a {
padding-left: 60px;
}
#menu li li li li ul a {
padding-left: 80px;
}
/* Panels */
.panel {
border-radius: 0px;
}
.panel .panel-heading {
position: relative;
}
.panel-heading h3 i {
margin-right: 8px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.panel-heading i {
font-size: 16px;
font-weight: 500;
}
.panel-heading h3 {
font-size: 16px;
font-weight: 500;
display: inline-block;
}
/* Primary Panel */
.panel-primary {
border: 1px solid #c3e4f6;
border-top: 2px solid #5cb7e7;
}
.panel-primary .panel-heading {
color: #1e91cf;
border-color: #96d0f0;
background: white;
}
/* Default Panel */
.panel-default {
border: 1px solid #e8e8e8;
border-top: 2px solid #bfbfbf;
}
.panel-default .panel-heading {
color: #595959;
border-color: #e8e8e8;
background: #fcfcfc;
}
/* Info Panel */
.panel-info {
border: 1px solid #e8e8e8;
border-top: 2px solid #3c8dbc;
}
.panel-info .panel-heading {
color: #595959;
border-color: #e8e8e8;
background: #fcfcfc;
}

Answer 1

I believe that adding 'position:fixed;' to your #column-left should do the trick.
In that case no matter how large/long your content is, the sidebar will always remain at 100% height of viewport, fixed at the left side of the screen.
div#column-left {
width: 50px;
min-height: 100% !important;
background-color: #515151;
position: fixed;
top: 0px;
padding-top: 100px;
z-index: 10;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

Answer 2

Set your body as position: relative if you want your left column to take the full height of your page. I would also explicitely set your column to take full height by removing your min-height and setting top: 0; bottom:0; on your column:
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
padding-top: 70px;
width: 100%;
position: relative;
}
#column-left {
width: 50px;
background-color: #515151;
position: absolute;
top: 0px;
bottom: 0px;
padding-top: 100px;
z-index: 10;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

Answer 3

It is actually 100% of the height of the viewport. (Not 100% of the page length).
What you can do:
#column-left { position: fixed; }
use display: table-cell on #column-left and #content
use flexbox (depending on if you have to support old browsers)

Answer 4

I'm not sure if it matters that it follows when you scroll the page, but you could make it position:fixed.
Perhaps that's an easy fix for you