<el-container>
时间: 2023-12-09 09:05:29 浏览: 24
<el-container> 是一个基于 Element UI 组件库的容器组件,用于将页面内容划分为不同的区域,方便进行布局和组织。它包含了两个子组件:<el-header> 和 <el-main>,分别用于定义页面头部和主要内容区域。同时也可以通过 <el-footer> 和 <el-aside> 组件来定义页面的底部和侧边栏。
相关问题
<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container>怎么实现主体部分高度自适应
在这个嵌套的 `el-container` 中,主体部分是 `el-main`,如果需要让 `el-main` 部分高度自适应,可以通过设置 `flex` 属性来实现。
具体步骤如下:
1. 给最外层的 `el-container` 设置样式,让其占满整个页面:
```css
.el-container {
height: 100vh;
display: flex;
flex-direction: column;
}
```
这样就使得 `el-container` 占满了整个视口,并且使用了 `flex` 布局。
2. 给 `el-main` 设置 `flex` 属性,并设置 `overflow-y: auto` 让其溢出时出现纵向滚动条:
```css
.el-main {
flex: 1;
overflow-y: auto;
}
```
这样就能让 `el-main` 部分高度自适应,并且出现滚动条。
最终的代码如下:
```html
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main class="main-content">Main</el-main>
</el-container>
</el-container>
```
```css
.el-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.el-main {
flex: 1;
overflow-y: auto;
}
```
这样就实现了 `el-main` 部分高度自适应的效果。
<div id="app"> <el-container> <el-aside :width="this.$store.state.isCollapsed ?'auto':'240px'"><Sidebar/></el-aside> <el-container> <el-header><Header /></el-header> <el-main> <Nuxt /> </el-main> <el-footer><Footer/></el-footer> </el-container> </el-container> </div> 以上是我的一段网页代码。我想让el-footer位于网页底部。主体内容较少时,footer不在页面底部,而是跟在主体内容后,挂在页面中下部分,但是我需要footer固定在页面的底部。但是如果我直接将其固定,会出现第二种情况,见2.2。 2.2 主体内容较长时,如果之前设置了footer位置固定在页面底部,不管主体内容有没有浏览到最后,footer都会一直悬浮在页面底部。但是我需要的是主体内容浏览完才展示footer。
你可以使用CSS来实现这个效果。首先,你可以将整个页面的高度设置为100%。然后,将el-container的高度设置为calc(100% - footer的高度)。接下来,将el-main的最小高度设置为calc(100% - footer的高度)。最后,在el-footer上使用position: sticky属性,将其固定在底部。
下面是修改后的代码示例:
```
<style>
html, body, #app {
height: 100%;
}
.container {
height: calc(100% - <footer高度>);
}
.main {
min-height: calc(100% - <footer高度>);
}
.footer {
position: sticky;
bottom: 0;
width: 100%;
}
</style>
<div id="app">
<el-container class="container">
<el-aside :width="this.$store.state.isCollapsed ?'auto':'240px'"><Sidebar/></el-aside>
<el-container>
<el-header><Header /></el-header>
<el-main class="main">
<Nuxt />
</el-main>
<el-footer class="footer"><Footer/></el-footer>
</el-container>
</el-container>
</div>
```
请注意,你需要将`<footer高度>`替换为你的实际footer的高度。这样修改后,当主体内容较少时,footer将会位于页面底部,当主体内容较长时,footer会在主体内容浏览完后展示在页面底部。