Q:

I cannot manage to create this layout in Vuejs element

Hi I tried all possible css combinations i can think of ,but i cannot manage to create a layout like this. 
everything scrolls including navbar and Tab controlls.
<el-row>
  <el-menu class="el-menu-demo" mode="horizontal"> ..</<el-menu>
</el-row>
<el-row>
<el-tabs>
   <el-tab-pane>...</el-tab-pane>
<el-tabs>
</el-row>

final expected outcome

A:

This has nothing to do with Vue.JS, but it's just plain CSS that is of problem here.
Typically, to have such "full-window" layouts with fixed elements (like navbar, footer), it's best to use absolute positioning for these elements.
I've created a small JSFiddle that creates such a layout:
https://jsfiddle.net/5wgb94kv/
Basic ideas:

the navigation bar is positioned absolutely to the top of the window with a fixed height (in CSS: position:absolute; top:0; height:25px;).
the tab bar is also positioned absolutely to the top, but below the nabber. (CSS: position:absolute; top:25px; height:25px;)
the footer is positioned absolutely to the bottom (CSS: position:absolute; bottom:0; height:25px;)
the content is positioned absolute as well, with the correct insets from top and bottom, and with overflow-x set to scroll. CSS: position:absolute; top: 50px; bottom:25px; overflow-x: scroll;

See the jsfiddle for the full css details.

