elementui 有header,怎么让aside铺满全屏

你可以使用 element-ui 的 aside 组件来实现你的需求。首先，你需要在 HTML 文件中引入 aside 组件：

<template>
  <el-aside class="full-screen">
    <!-- 你的 aside 内容 -->
  </el-aside>
</template>

然后，在你的 CSS 文件中添加以下样式：

.full-screen {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

这样就可以让 aside 组件铺满全屏了。注意，上面的样式假设你的页面有一个 header 组件，因此将 aside 的顶部设置为 60px 以留出 header 的空间。如果你没有 header 组件，可以将 top 属性设置为 0。

希望这些信息能帮到你！

相关问题

elementui <el-aside> 铺满全屏

### 回答1：
要让 elementui 的 <el-aside> 铺满全屏，你可以这样做：

1. 使用 CSS 的 `height: 100vh` 将 <el-aside> 的高度设为视口高度（viewport height），这样 <el-aside> 就可以铺满整个屏幕。

el-aside {
  height: 100vh;
}

2. 如果你想让 <el-aside> 在有滚动条的情况下仍然铺满全屏，你可以使用 CSS 的 `height: 100%` 将 <el-aside> 的高度设为父元素的高度，然后再设置父元素的高度为视口高度。

el-aside {
  height: 100%;
}

body, html {
  height: 100vh;
}

注意：如果你使用了 Bootstrap 或其他 CSS 框架，请确保不会与其冲突。

### 回答2：
要将Element UI中的<el-aside>元素铺满全屏，可以使用CSS样式来实现。

首先，给<el-aside>元素添加一个类名，比如"full-screen"，可以在<el-aside>上通过class绑定属性来设置类名。如下所示：

<el-aside class="full-screen"></el-aside>

然后，使用CSS样式将这个类名的元素铺满全屏。可以使用以下样式来实现：

.full-screen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

上述样式中，设置position为absolute，可以脱离文档流；使用top、left、right和bottom属性将元素定位到整个屏幕的四个边缘，实现铺满全屏的效果。

这样，<el-aside>元素就可以铺满整个屏幕了。

注意：铺满全屏时，需要确保<el-aside>的父元素也具有100%的高度，可以设置父元素的高度为100%来实现。否则，<el-aside>元素可能无法完全铺满屏幕。

希望以上回答能够对您有所帮助。如果还有其他问题，请随时提问。

### 回答3：
要使`<el-aside>`元素铺满全屏，可以使用CSS样式来实现。可以设置其父元素的宽度为100%，然后设置`<el-aside>`元素的宽度和高度为100%。

首先，在父元素中将其宽度设置为100%：

<div class="container">
  <el-aside>侧边栏内容</el-aside>
</div>

然后在CSS样式中，将父元素设置为100%宽度和高度，并将`<el-aside>`元素的宽度和高度也设置为100%：

<style>
  .container {
    width: 100%;
    height: 100%;
  }

  .container el-aside {
    width: 100%;
    height: 100%;
  }
</style>

通过以上设置，`<el-aside>`元素将会铺满整个屏幕。

elementui布局容器铺满

要将element-ui布局容器铺满，可以按照以下步骤操作：

1. 首先，将包含aside区域与main区域的el-container标签的高度设置为100%，可以使用如下CSS样式来实现：

body>.el-container {
  margin-bottom: 40px;
  height: 100%;
}

2. 其次，给el-container设置direction="vertical"属性，因为它包含了main和footer，这样可以确保它们在垂直方向上铺满容器。可以在el-container标签上添加direction="vertical"属性来实现：

<el-container direction="vertical">
  <!-- 这里放置main和footer -->
</el-container>

3. 此外，还需要检查是否有其他标签限制了高度，例如上面提供的示例代码中的<div>标签。如果有其他标签限制了高度，需要将其高度设置为100%以确保el-container可以铺满页面：

<div style="height: 100%;">
  <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>
</div>

通过以上步骤，你可以实现element-ui布局容器铺满的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>