程序员scholar
  • Element-UI
  • 基础组件
scholar
2024-08-12
目录

布局容器 (Container)

# 布局容器 (Container)

Element-UI 提供了一套基于 Flexbox 布局的容器组件，用于快速搭建页面的基本结构。这套组件包括：

提示

Container布局容器官方文档：https://element.eleme.cn/#/zh-CN/component/container (opens new window)

  1. <el-container>：用于包裹布局的外层容器。
  2. <el-header>：用于放置页面顶部的导航栏。
  3. <el-aside>：用于放置侧边栏内容。
  4. <el-main>：用于放置主要内容区域。
  5. <el-footer>：用于放置页面底部的版权信息或其他内容。

# 1. 布局组件的行为和排列规则

# <el-container> 的基本行为

  • 默认空间占用：<el-container> 默认情况下会占据其父容器内的剩余所有空间。
  • 基于 Flexbox：<el-container> 及其子组件采用 Flexbox 布局，支持响应式和动态调整的页面布局。

# 排列规则

  1. 子元素包含 <el-header> 或 <el-footer> 时：
    • 当 <el-container> 的直接子元素中包含 <el-header> 或 <el-footer>，子元素将垂直排列。
    • 常用于布局顶部和底部的结构（如导航栏、页脚）。
  2. 子元素不包含 <el-header> 和 <el-footer> 时：
    • 默认情况下，子元素水平排列。
    • 常用于侧边栏和内容区域的布局。
  3. <el-aside> 的特殊性：默认位置是在布局中的左侧，无论是在水平布局还是垂直布局中。
  4. 嵌套 <el-container> 的行为：
    • 如果 <el-container> 的子元素是另一个 <el-container>，内层容器的布局规则独立于外层容器。
    • 内层 <el-container> 的子元素排列方向只影响内层布局，不影响外层布局。

# 2. 容器组件的属性

# <el-container> 属性

参数 说明 类型 可选值 默认值
direction 子元素的排列方向 string horizontal / vertical 子元素中有 <el-header> 或 <el-footer> 时为 vertical(垂直)，否则为 horizontal(水平)

# <el-header> 属性

参数 说明 类型 可选值 默认值
height 顶栏高度 string — 60px

# <el-aside> 属性

参数 说明 类型 可选值 默认值
width 侧边栏宽度 string — 300px
参数 说明 类型 可选值 默认值
height 底栏高度 string — 60px

全屏布局：设置 height: 100vh; 可以使元素占满整个浏览器窗口的高度。

# 3. 常用布局示例

# 布局常用设置

body 和 html 的高度设置：

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
1
2
3
4
5
6
  • 这些设置确保 body 和 html 填满整个视口高度，有助于使用 height: 100vh; 或 height: 100%; 的布局正确填充。

设置el-main滚动区域设置：

/* 滚动区域 */
.scrollable-main {
  overflow-y: auto;
  height: calc(100vh - 60px);
  /* 减去顶部导航栏的高度 */
}
1
2
3
4
5
6
  • overflow-y: auto; 允许垂直方向上出现滚动条。
  • height: calc(100vh - 60px); 设置 el-main 的高度为视口高度减去顶部导航栏的高度（60px），确保 el-main 始终填满剩余高度。

# 标准顶部-内容-底部布局

这种布局是最常见的页面布局，适用于大多数网页场景。顶部放置导航或标题，中间是主要内容区域，底部为版权或其他信息。

<template>
  <el-container style="height: 100vh;"> /
    <!-- 顶部导航栏 -->
    <el-header height="60px" style="background-color: #b3c0d1;">
      顶栏内容
    </el-header>
    
    <!-- 主要内容区域 -->
    <el-main style="background-color: #e9eef3;">
      主要内容
    </el-main>

    <!-- 底部信息栏 -->
    <el-footer height="60px" style="background-color: #b3c0d1;">
      底栏内容
    </el-footer>
  </el-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

image-20240807041028814

# 侧边栏-内容布局

这种布局通常用于后台管理系统，侧边栏用于导航，主区域用于显示详细内容。

<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: #d3dce6;">
      侧边栏内容
    </el-aside>
    
    <el-main style="background-color: #e9eef3;">
      主要内容
    </el-main>
  </el-container>
</template>
1
2
3
4
5
6
7
8
9
10
11

image-20240807041117653

# 侧边栏-顶部-内容布局

这种布局在左侧提供了导航栏，同时在顶部增加了全局导航或工具栏，剩余部分用于显示详细内容。

<template>
  <el-container style="height: 100vh;">
    <!-- 左侧侧边栏 -->
    <el-aside width="200px" style="background-color: #d3dce6;">
      侧边栏内容
    </el-aside>
    
    <!-- 主体部分 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header height="60px" style="background-color: #b3c0d1;">
        顶栏内容
      </el-header>
      
      <!-- 主要内容区域 -->
      <el-main style="background-color: #e9eef3;">
        主要内容
      </el-main>
    </el-container>
  </el-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

image-20240807043410796

# 顶部-侧边栏-内容布局

这种布局适用于需要顶部导航和侧边栏导航的场景，常用于复杂的仪表盘和后台管理界面。

<template>
  <el-container style="height: 100vh;">
    <!-- 顶部导航栏 -->
    <el-header height="60px" style="background-color: #b3c0d1;">
      顶栏内容
    </el-header>
    
    <!-- 主体部分 -->
    <el-container>
      <!-- 左侧侧边栏 -->
      <el-aside width="200px" style="background-color: #d3dce6;">
        侧边栏内容
      </el-aside>
      
      <!-- 主要内容区域 -->
      <el-main style="background-color: #e9eef3;">
        主要内容
      </el-main>
    </el-container>
  </el-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

image-20240807040840954

# 顶部-内容-底部布局带侧边栏

这是一个组合布局，适合需要顶部导航、侧边栏导航和底部信息的复杂页面。


 






 









 





 


<template>
  <el-container style="height: 100vh;">
    <!-- 顶部导航栏 -->
    <el-header height="60px" style="background-color: #b3c0d1;">
      顶栏内容
    </el-header>
    
    <!-- 主体部分 -->
    <el-container>
      <!-- 左侧侧边栏 -->
      <el-aside width="200px" style="background-color: #d3dce6;">
        侧边栏内容
      </el-aside>
      
      <!-- 主要内容区域 -->
      <el-main style="background-color: #e9eef3;">
        主要内容
      </el-main>
    </el-container>

    <!-- 底部信息栏 -->
    <el-footer height="60px" style="background-color: #b3c0d1;">
      底栏内容
    </el-footer>
  </el-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

image-20240807040825571

# 嵌套容器布局

在复杂页面中，可以使用嵌套的 <el-container> 来实现多层次布局。例如，在内容区域再细分为多个布局模块。


 






 






 









 





 





 


<template>
  <el-container style="height: 100vh;">
    <!-- 顶部导航栏 -->
    <el-header height="60px" style="background-color: #b3c0d1;">
      顶栏内容
    </el-header>
    
    <!-- 主体部分 -->
    <el-container>
      <!-- 左侧侧边栏 -->
      <el-aside width="200px" style="background-color: #d3dce6;">
        侧边栏内容
      </el-aside>
      
      <!-- 主内容区域，包含嵌套容器 -->
      <el-container>
        <!-- 内层顶部 -->
        <el-header height="40px" style="background-color: #e5e9f2;">
          内层顶栏
        </el-header>
        
        <!-- 内层主要内容 -->
        <el-main style="background-color: #e9eef3;">
          内层主要内容
        </el-main>
      </el-container>
      
      <!-- 外层主要内容 -->
      <el-main style="background-color: #f5f7fa;">
        外层主要内容
      </el-main>
    </el-container>

    <!-- 底部信息栏 -->
    <el-footer height="60px" style="background-color: #b3c0d1;">
      底栏内容
    </el-footer>
  </el-container>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

image-20240807042900396

总结

  • 垂直与水平排列：通过 <el-header> 和 <el-footer> 的存在与否来决定 <el-container> 的子元素排列方向。
  • 独立布局：嵌套 <el-container> 独立处理自己的子元素排列。
  • 空间利用：<el-main> 等组件会自动扩展以占据可用空间，提供灵活的布局选项。

以下是关于如何在页面的特定区域实现内部滚动条的通用总结：

# 4. 实现区域内部滚动条

在网页布局中，有时我们需要在特定区域内显示滚动条，而不是在整个窗口中显示。这可以通过设置 CSS 样式来实现，确保当内容超出特定区域时，滚动条仅在该区域内部出现。以下是实现这一目标的步骤和示例。

实现步骤

  1. 固定宽度和高度：

    • 为需要滚动的区域设置固定的宽度和高度，以限制其显示范围并确定滚动的边界。

  2. 应用 overflow 属性：

    • 使用 overflow: auto; 让滚动条在内容溢出时自动出现，也可以使用 overflow: scroll; 使滚动条始终可见。

  3. 确保 box-sizing 设置正确：

    • 使用 box-sizing: border-box; 以确保内边距和边框包含在元素的总宽度和高度中，不会影响布局。

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>区域内部滚动条示例</title> 
<style>
.scrollable-area {
    width: 300px;  /* 设置区域的固定宽度 */
    height: 200px; /* 设置区域的固定高度 */
    overflow: auto; /* 内容超出时显示滚动条 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框便于查看区域 */
    box-sizing: border-box; /* 包含内边距和边框 */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 隐藏全局滚动条 */
}
</style>
</head>
<body>

<h2>区域内部滚动条</h2>
<div class="scrollable-area">
  <p>这是一个可以滚动的内容区域。当内容超出区域的宽度或高度时，滚动条将自动出现。</p>
  <p>更多内容...</p>
  <p>更多内容...</p>
  <p>更多内容...</p>
  <p>更多内容...</p>
  <p>更多内容...</p>
  <p>更多内容...</p>
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

关键要点

  • overflow 属性：设置为 auto 或 scroll 以控制滚动行为。auto 仅在需要时显示滚动条，而 scroll 始终显示滚动条。

  • 高度和宽度：确保为滚动区域指定固定的宽度和高度，以限制滚动范围。

  • box-sizing: border-box;：使内边距和边框包含在元素的总宽度和高度中，避免布局超出预期。

  • 隐藏全局滚动条：通过设置 body 和 html 的 overflow: hidden;，确保滚动条仅在特定区域内出现，而不会影响整个页面。

编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
Element-UI 快速上手
栅格布局 (Layout)

← 栅格布局 (Layout)→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar