make pages scrollable

Author: rossengeorgiev

css/main.css

@@ -73,6 +73,9 @@ html, body {
 }
 
 header {
+    position: fixed;
+    top: 0;
+    left; 0;
     padding: 0;
     margin: 0;
     height: 50px;
@@ -82,7 +85,6 @@ header {
     border-bottom: 5px solid #33b5e5;
     box-shadow: 0px 1px 3px #555;
     z-index: 5;
-    position: relative;
 }
 #app_name {
     line-height: normal;
@@ -94,6 +96,11 @@ header > div {
     position: relative;
     height: 50px;
 }
+
+#mapscreen {
+    margin-top: 55px;
+}
+
 #map,
 #main {
     position: relative;
@@ -224,8 +231,9 @@ header > div {
     color: #00A3D3;
 }
 
-#chasecarbox,
-#aboutbox {
+.flatpage {
+    margin-top: 55px;
+    overflow: auto;
     position: absolute;
     width: 100%;
     z-index: 4;
@@ -242,9 +250,9 @@ header > div {
     margin: 0;
 }
 .slimContainer {
+    position: relative;
     margin: 20px auto;
     width: 300px;
-    height: 100%;
 }
 .slimContainer hr {
     margin-bottom: 10px;
@@ -394,6 +402,7 @@ header > div {
         height: 245px;
         width: 199px;
         overflow: hidden;
+        margin-top: 55px;
     }
     #main .data {
         height: 100%;

index.html

@@ -46,7 +46,7 @@
         </div>
     </header>
 
-    <div id="aboutbox" style="display: none">
+    <div id="aboutbox" style="display: none" class="flatpage">
         <div class="slimContainer">
             <h2>About</h2>
             <hr>
@@ -63,7 +63,7 @@ <h2>Contribute</h2>
             </span>
         </div>
     </div>
-    <div id="settingsbox" style="display: none">
+    <div id="settingsbox" style="display: none" class="flatpage">
         <div class="slimContainer">
             <h2>Settings</h2>
             <hr>
@@ -112,10 +112,9 @@ <h2>Settings</h2>
                 The size of cache files is around 600 KB.
                 </span>
             </div>
-            <span>&nbsp;</span>
         </div>
     </div>
-    <div id="chasecarbox" style="display: none">
+    <div id="chasecarbox" style="display: none" class="flatpage">
         <div class="slimContainer">
             <h2>Chase car mode</h2>
             <hr>

js/app.js

@@ -99,10 +99,10 @@ function checkSize() {
     w = $(window).width();
     w = (w < 320) ? 320 :  w; // absolute minimum 320px
     h = $(window).height();
-    h = (h < 300) ? 300 :  h; // absolute minimum 320px minus 20px for the iphone bar
+    //h = (h < 300) ? 300 :  h; // absolute minimum 320px minus 20px for the iphone bar
     hh = $('header').height();
 
-    $("#mapscreen").height(h-hh-5);
+    $("#mapscreen,.flatpage").height(h-hh-5);
 
     sw = (embed.vlist) ? 199 : 0;