Default Sidebar should grow with page height

The 'default' theme sidebar needs to grow with the size of the page,
rather than just spanning the initial viewport on page load.

Change-Id: I7fbdacb517541f9e35d1887b3af80a918a1aa497
Closes-bug: #1485764

openstack_dashboard/static/dashboard/scss/components/_sidebar.scss

@@ -1,8 +1,5 @@
 #sidebar {
-  margin-left: -$sidebar-width;
-  left: $sidebar-width;
-  width: $sidebar-width;
-  position: absolute;
+  min-width: $sidebar-width;
   z-index: 0;
 
   // Sets the arrow toggles for each dashboard list

openstack_dashboard/static/dashboard/scss/horizon.scss

@@ -42,9 +42,41 @@
   zoom: 1;
 } // IE7
 
-body {
+
+// Basic Page Layout
+// Make the sidebar span the entire page, instead of just the Viewport
+// Display Table is not ideal, but it will allow dynamic resizing of
+// the sidebar while growing its container to fill the entire window
+html, body, #container {
+  height: 100%;
 }
 
+// Theme Note:
+// The following 1px is the default 1px for nav border in Bootstrap. If
+// this value is customized, then this value must change to compensate
+$navbar-border-size: 1px !default;
+$navbar-true-height: $navbar-height + $navbar-border-size !default;
+
+#main_content {
+  height: 100%; /* fallback if needed --> its scrolls, but it works */
+  height: calc(100% - #{$navbar-true-height});
+  display: table;
+}
+
+#content_body,
+#sidebar {
+  display: table-cell;
+  vertical-align: top;
+}
+
+#content_body {
+  width: 100%;
+  padding-left: $content-body-padding;
+  padding-right: $content-body-padding;
+}
+
+// Basic Page Layout End
+
 small {
   font-size: 11px;
 }
@@ -962,11 +994,6 @@ tr.terminated {
   text-align: center;
 }
 
-#content_body {
-  padding-left: $sidebar-width + $content-body-padding;
-  padding-right: $content-body-padding;
-}
-
 .tab_wrapper {
   padding-top: 50px;
 }