css - 我无法在 Vuejs 元素中创建此布局

Question

您好，我尝试了所有我能想到的可能的 css 组合，但我无法创建这样的布局。

一切都滚动，包括导航栏和选项卡控件。

<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 的问题。

通常，要具有固定元素(如导航栏、页脚)的此类“全窗口”布局，最好对这些元素使用绝对定位。

我创建了一个小型 JSFiddle 来创建这样的布局: https://jsfiddle.net/5wgb94kv/

基本思路:

• 导航栏以固定高度绝对定位在窗口顶部(在 CSS 中:position:absolute; top:0; height:25px;)。
• 标签栏也绝对位于顶部，但位于 nabber 下方。 (CSS: position:absolute; top:25px; height:25px;)
• 页脚绝对定位到底部(CSS:position:absolute; bottom:0; height:25px;)
• 内容也是绝对定位的，从顶部和底部正确插入，并将 overflow-x 设置为滚动。 CSS:position:absolute；顶部:50px；底部:25px；溢出-x:滚动；

有关完整的 CSS 详细信息，请参阅 jsfiddle。