Bruker en annen måte å plassere footer på bunn av siden

navikt · Feb 23, 2022 · c27d179 · c27d179
1 parent a75600d
commit c27d179
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/styles.less b/src/styles.less
@@ -28,13 +28,17 @@ body {
   .skjemaelement--pink();
 }
 
-.body-flex {
-  display: flex;
-  flex-direction: column;
+.push-footer-down {
+  min-height: 100%;
+  margin-bottom: -420px; /* height of footer */
+  padding-bottom: 420px;
 }
 
-.main-flex {
-  flex: 1;
+@media (min-width: 1300px) {
+  .push-footer-down {
+    margin-bottom: -240px; /* height of footer */
+    padding-bottom: 240px;
+  }
 }
 
 body.screen-xs-no-scroll {

diff --git a/src/styles/footer.less b/src/styles/footer.less
@@ -9,6 +9,13 @@
     background-color: #f3eaf3;
     display: flex;
     justify-content: center;
+    min-height: 420px;
+}
+
+@media (min-width: 1300px) {
+    .arbeidsplassen-footer {
+        min-height: 240px;
+    }
 }
 
 .arbeidsplassen-footer.arbeidsplassen-footer-dark {

diff --git a/views/index.html b/views/index.html
@@ -18,14 +18,15 @@
     <link rel="icon" href="/images/favicon.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-180.png" />
 </head>
-<body class="body-flex" id="app">
-    <a class="arbeidsplassen-skiplink" href="#main-content">Hopp til hovedinnhold</a>
-    {{> components/header}}
-
-    <main class="main-flex" id="main-content">
-        <div id="reactApp"></div>
-    </main>
+<body id="app">
+    <div class="push-footer-down">
+        <a class="arbeidsplassen-skiplink" href="#main-content">Hopp til hovedinnhold</a>
+        {{> components/header}}
 
+        <main id="main-content">
+            <div id="reactApp"></div>
+        </main>
+    </div>
     {{> components/footer}}
     <script type="application/javascript" src="/stillinger/js/sok.js"></script>
 </body>