我无法在 Vuejs 元素中创建此布局答案

【问题标题】：I cannot manage to create this layout in Vuejs element我无法在 Vuejs 元素中创建此布局
【发布时间】：2018-03-13 19:44:49
【问题描述】：

您好，我尝试了我能想到的所有可能的 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>

最终预期结果

【问题讨论】：

标签： css twitter-bootstrap vuejs2

【解决方案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;）
内容也是绝对定位的，顶部和底部的插入正确，溢出-x 设置为滚动。 CSS：position:absolute; top: 50px; bottom:25px; overflow-x: scroll;

查看 jsfiddle 了解完整的 css 详细信息。

【讨论】：