diff --git a/src/App.vue b/src/App.vue
index e35a4ed3cd28870e7d7dd3ae0312fbd9420ec76c..39d5594e20757005d7638c61d617d54bad8b20a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="app">
+    <header>
+      <h1><a href="/">Ordbøkene <span style="color: #bbbbbb;">(BETA)</span></a></h1>
+      <p class="about-link"><a href="#">OM ORDBØKENE</a></p>
+      <p class="sub-title"><a href="/">Bokmålsordboka og Nynorskordboka</a></p>
+      <p class="mission-statement"><a href="/">Skrivemåte og bøying i tråd med norsk rettskriving </a></p>
+    </header>
     <main>
-      <header>
-        <h1><a href="/">Ordbøkene <span style="color: #bbbbbb;">(BETA)</span></a></h1>
-        <p class="about-link"><a href="#">OM ORDBØKENE</a></p>
-        <p class="sub-title"><a href="/">Bokmålsordboka og Nynorskordboka</a></p>
-        <p class="mission-statement"><a href="/">Skrivemåte og bøying i tråd med norsk rettskriving </a></p>
-      </header>
       <div class="search_container">
         <autocomplete :debounceTime="100" :auto-select="true" :search="search"  @submit="select_result" placeholder="søk..." ref="search">
           <template #result="{result, props}">
@@ -254,6 +254,13 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   background-color: #FDF4F5;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+html, body {
+    height: 100%
 }
 
 body {
@@ -298,6 +305,7 @@ main {
   background-attachment: fixed;
   min-height: 500px;
   padding-bottom: 20px;
+  flex: 1 0 auto;
 }
 
 header, #search_results, #spinner, #single_article_container, footer, div.welcome, div.search_container {