Do not always use full viewport to allow embedding angular-filemanager as a widget into other webapps.

Author: fkoester

src/css/main.css

@@ -1,6 +1,6 @@
 body {
-  padding-top: 55px;
   font-size: 14px;
+  height: 100vh;
 }
 
 *,
@@ -10,6 +10,10 @@ body {
 
 .navbar {
   min-height: 32px;
+  margin-bottom: 0;
+  border: 0;
+  z-index: 1030;
+  border-radius: 0;
 }
 
 .navbar .navbar-toggle {
@@ -63,10 +67,6 @@ textarea.code {
   border-bottom: 1px solid #eee;
 }
 
-.navbar-fixed-top {
-  border: 0;
-}
-
 .sidebar {
   display: none;
 }
@@ -282,20 +282,31 @@ table th > a:focus {
   font-weight: bold;
 }
 
+.main {
+  overflow-y: auto;
+}
+
 @media (min-width: 768px) {
   .main {
     padding-right: 0;
     padding-left: 0;
   }
 
+  /* The view should fill all available vertical space */
+  angular-filemanager > div,.row,.main,.sidebar {
+    height: 100%;
+  }
+
+  .container-fluid {
+    height: -webkit-calc(100% - 55px);
+    height: -moz-calc(100% - 55px);
+    height: calc(100% - 55px);
+  }
+
   .sidebar {
-    position: fixed;
-    top: 50px;
-    bottom: 0;
-    left: 0;
     z-index: 1000;
     display: block;
-    padding: 5px 0;
+    padding: 0;
     overflow-x: hidden;
     overflow-y: auto;
     background-color: #f5f5f5;
@@ -313,4 +324,4 @@ table th > a:focus {
   .table.table-files .btn {
     display: none;
   }
-}
+}

src/templates/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -39,4 +39,4 @@
       </div>
     </div>
   </div>
-</nav>
+</nav>