refactored the layout:

removed fixed head, replaced with flex
moved pagetitle and searchform to headerbottom region
added Common store to vuejs with pagetitle data
added pagetitle vuejs component

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -14,6 +14,9 @@ body{
 
 div.dialog-off-canvas-main-canvas{
   width: 100vw;
+  height:100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
@@ -45,17 +48,24 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
 // |_||_\___\__,_\__,_\___|_|
 
 header[role="banner"]{
-   
+  flex:0 0 auto;
   background-color: #fff;
-  overflow: visible;
-  position: fixed;
-  z-index: 20;
+  // overflow: visible;
+  // position: fixed;
+  // z-index: 20;
   width:100vw;
-  height: $header_height;
+  // height: $header_height;
   .wrapper{
     @extend %grided-width;
     // box-sizing:border-box;
-    
+    background-color: #fff;
+
+    &:after{
+      content:"";
+      clear:both;
+      display: block;
+    }
+
     .header-block{
       min-height: 15px;
       font-size: 0;
@@ -73,14 +83,20 @@ header[role="banner"]{
 }
 
 
+
 //  __  __      _
 // |  \/  |__ _(_)_ _
 // | |\/| / _` | | ' \
 // |_|  |_\__,_|_|_||_|
 
 main[role="main"]{
-  @extend %grided-width;
-
-  padding-top: $header_height+8px;
-  
+  flex:1 1 auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  &>.wrapper{
+    width:100vw;
+    &>*{
+      @extend %grided-width;
+    }
+  }
 }

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -1,6 +1,4 @@
 $base_font_size:16px;
 
-$header_height: 60px;
-
 $column_width: 210px;
-$column_goutiere: 15px;
+$column_goutiere: 15px;