私はVuejsの要素でこのレイアウトを作成することはできません

Question

こんにちは、考えられるすべてのCSSの組み合わせを試しましたが、このようなレイアウトを作成することはできません。

navbarとTabコントロールを含むすべてがスクロールします。

<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> 

最終期待される成果

Answer 1

これはVue.JSとは何の関係もありませんが、それはここでの問題であり、単なるCSSのです。

通常、固定要素（navbar、footerなど）を備えた「フルウインドウ」のレイアウトを使用するには、これらの要素に絶対配置を使用することをお勧めします。 https://jsfiddle.net/5wgb94kv/

基本的な考え方：

私は、このようなレイアウトを作成し、小さなJSFiddleを作成しました

ナビゲーションバーは、中（固定高さとウィンドウの上部に絶対的に配置されている

• CSS：position:absolute; top:0; height:25px;）。
• タブバーは、絶対的に上部に位置しますが、ナバーの下にあります。 （CSS：position:absolute; top:25px; height:25px;）：コンテンツがスクロールする頂部および底部、及びオーバーフロー-Xが設定されているから正しいインセットと、同様に絶対配置され
• フッタは、底部（position:absolute; bottom:0; height:25px; CSS）に絶対的に位置決めされます。 CSS：position:absolute; top: 50px; bottom:25px; overflow-x: scroll;

完全なCSSの詳細については、jsfiddleを参照してください。