CSS: Avoid fixed positioning

refs #3810
Icinga · May 29, 2019 · 9f0c6aa · 9f0c6aa
1 parent e23a0e5
commit 9f0c6aa
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 29 deletions.
diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
@@ -80,8 +80,15 @@
 
 // Make padding not affect the final computed width of an element
 html {
+  min-height: 100%;
+  height: 100%;
   box-sizing: border-box;
 }
+
+body {
+  height: 100%;
+}
+
 *,
 *:before,
 *:after {

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
@@ -6,35 +6,28 @@ html {
 
 #layout {
   height: 100%;
-  width: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-#header {
-  width: 100%;
-  padding-bottom: 3em;
-  position: fixed;
-  left: 0;
-  top: 0;
+#content-wrapper {
+  flex: 1;
+  display: flex;
+}
 
+#header {
 }
 
 #sidebar {
   width: 12em;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  top: 4.5em;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 #main {
-  position: fixed;
-  bottom: 0;
-  left: 12em;
-  right: 0;
-  top: 2.25em;
+  flex: 1;
+  overflow: hidden;
 }
 
 .iframe {

diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
@@ -41,9 +41,6 @@
   height: 6em;
   padding: 1.25em;
   width: 16em;
-  position: fixed;
-  left: 0;
-  margin-top: -3em;
 }
 
 #header-logo,
@@ -178,7 +175,6 @@
 
   > .tabs {
     height: 2.6em;
-    margin-top: -2.6em;
     overflow: hidden;
   }
 
@@ -192,7 +188,6 @@ html.no-js .controls > .tabs {
   background-color: @icinga-blue;
   margin-left: -1 * @gutter;
   margin-right: -1 * @gutter;
-  margin-top: -1 * @gutter;
 }
 
 // Dashboard grid

diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less
@@ -1,10 +1,5 @@
 /*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
 
-#layout {
-  overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
-}
-
-
 #setup {
   .header {
     width: 100%;