vue element ui 将页面分成两部分,一部分可滚动条滑动,另一个部分始终固定屏幕底部
时间: 2024-03-08 08:46:34 浏览: 199
vue+element-ui分页组件
可以使用 Vue 和 Element UI 的布局组件来实现将页面分成两部分,其中一部分可滚动条滑动,另一个部分始终固定在屏幕底部。
首先,可以使用 `el-container` 组件作为页面的最外层容器,将页面分成两个部分,如下所示:
```html
<el-container>
<!-- 可滚动的部分 -->
<el-main>
<!-- 这里放置可滚动的内容 -->
</el-main>
<!-- 固定在底部的部分 -->
<el-footer>
<!-- 这里放置始终固定在底部的内容 -->
</el-footer>
</el-container>
```
接着,可以在 `el-main` 组件中添加一个滚动条,使其内部的内容可以滚动,如下所示:
```html
<el-main style="overflow-y: auto;">
<!-- 这里放置可滚动的内容 -->
</el-main>
```
最后,可以在 `el-footer` 组件中添加一个固定定位的样式,将其始终固定在屏幕底部,如下所示:
```html
<el-footer style="position: fixed; bottom: 0;">
<!-- 这里放置始终固定在底部的内容 -->
</el-footer>
```
这样就可以实现将页面分成两部分,一部分可滚动条滑动,另一个部分始终固定在屏幕底部的效果。
阅读全文