Fix scrolling in layout

3 years ago · e562017b33
parent e79c300c7d
commit e562017b33
2 changed files with 20 additions and 14 deletions
--- a/components/layout.js
+++ b/components/layout.js
@ -13,9 +13,9 @@ export class Layout extends HTMLElement {
        display: flex;
        flex-direction: column;
        align-items: stretch;
-        height: 100vh;
-        min-height: 100vh;
-        max-height: 100vh;
+        height: 100svh;
+        min-height: 100svh;
+        max-height: 100svh;
        overflow-y: hidden;
        position: relative;
      }
--- a/components/page.js
+++ b/components/page.js
@ -3,16 +3,22 @@ const frameHtml = `<!doctype html>
  <head>
    <title>Frame</title>
    <style>
-      html, body, iframe {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-      }
-      iframe {
-        border: none;
-        display: block;
-      }
+html, body, iframe {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+iframe {
+  border: none;
+  display: block;
+}
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
    </style>
  </head>
  <body>
@ -67,7 +73,7 @@ export class Page extends HTMLElement {
        align-items: stretch;
      }
      div.twrap {
-        padding: 5px 10px;
+        padding: 10px 10px;
        display: flex;
        align-items: stretch;
        flex-direction: column;