Fix scrolling issues

res/static/style/layout.css

@@ -51,9 +51,7 @@
 }
 
 /* Page rendering configuration */
-html, body {
-	overflow: hidden;
-}
+
 body{
 	background-color: #0d0d0d; /* Fallback */
 	background-color: var(--body_color);
@@ -76,7 +74,8 @@ body{
 }
 
 .button_toggle_navigation {
-	position: absolute;
+	position: fixed;
+	backface-visibility: hidden;
 	z-index: 300;
 	top: 0;
 	left: 0;
@@ -89,7 +88,8 @@ body{
 	box-shadow: 2px 2px 8px -3px var(--shadow_color);
 }
 .page_navigation {
-	position: absolute;
+	position: fixed;
+	backface-visibility: hidden;
 	z-index: 100;
 	width: 250px;
 	height: 100%;
@@ -107,9 +107,8 @@ body{
 .page_body {
 	position: absolute;
 	z-index: 200;
-	top: 0;
 	right: 0;
-	bottom: 0;
+	height: auto;
 	left: 250px;
 	min-width: 300px;
 	display: inline-block;

res/template/fragments/page_wrap.html

@@ -1,5 +1,5 @@
 {{define "page_top"}}
-<div id="page_wrapper">
+<!-- <div id="page_wrapper"> -->
 <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
 <div id="page_navigation" class="page_navigation">
 	<a href="/">Home</a>
@@ -30,7 +30,7 @@
 		Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
 	</div>
 </div><!-- end page_body -->
-</div><!-- end page_wrapper -->
+<!-- </div>end page_wrapper -->
 <script>
 	var nav = document.getElementById("page_navigation");
 	var body = document.getElementById("page_body");