fix: solve height issue

FlowingCode · Nov 4, 2021 · f5bac83 · f5bac83
1 parent 4b9a29e
commit f5bac83
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/fc-applayout.ts b/src/fc-applayout.ts
@@ -40,6 +40,7 @@ export class FcAppLayoutElement extends ThemableElement {
       color: #fff;
       transform: translate3d(0px, 0px, 0px);
       display:flex;
+      height: var(--app-header-height, 64px);
     }
 
     app-toolbar.alignRight {
@@ -78,6 +79,17 @@ export class FcAppLayoutElement extends ThemableElement {
         flex-grow: 1;
     }
 
+    .content-container {
+      width:100%; 
+      height:calc( 100% - var(--app-header-height, 64px) ); 
+      transform: translateY(var(--app-header-height, 64px));
+    }
+
+    .layout-container {
+      height:100%;
+      width:100%; 
+    }
+
     :host {
       width: 100%;
       height: 100%;
@@ -151,7 +163,7 @@ export class FcAppLayoutElement extends ThemableElement {
 
   render() {
     return html`
-      <div>
+      <div class="layout-container">
         <app-header part="header" id="header" effects="" ?shadow=${this.shadow} ?reveals=${this.reveals} ?fixed=${this.fixed} style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
           <app-toolbar part="toolbar" class=${this.drawerAlign=="right"?"alignRight":""}>
             <paper-icon-button ?hidden=${!this.drawerVisible} @click="${this.clickHandler}" icon="menu" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
@@ -167,7 +179,7 @@ export class FcAppLayoutElement extends ThemableElement {
             <slot name="menu"></slot>
           </paper-listbox>
         </app-drawer>
-        <div id="content"><slot></slot></div>
+        <div class="content-container" id="content"><slot name="content"></slot></div>
       </div>
     `;
   }