Element Plus Container 布局容器铺满屏幕的秘密

2023-02-05 19:38:50

Element Plus Container：轻松实现全屏布局

当使用 Element Plus 框架中的 Container 布局容器时，可能会遇到容器没有完全铺满屏幕，留有空白边距的问题。这是因为 Container 组件默认具有内边距（padding），导致其内容区域小于容器本身的尺寸。

为了解决这个问题，我们可以通过添加额外的 CSS 样式来覆盖 Container 的默认样式，消除内边距并让容器铺满整个屏幕。

有两种方法可以实现：

方法一：内联样式

在 HTML 代码中，直接为 Container 组件添加内联样式，如下所示：

<el-container style="padding: 0 !important;">
  ...
</el-container>

方法二：外部样式表

在外部样式表中，为 Container 组件添加样式，如下所示：

.container {
  padding: 0 !important;
}

无论使用哪种方法，都可以让 Container 组件铺满整个屏幕。但是，内联样式可能会导致 CSS 代码难以维护，因此建议使用外部样式表。

除了 CSS，我们还可以使用 Sass（Syntactically Awesome Style Sheets）来让 Container 铺满整个屏幕。Sass 是一种 CSS 扩展语言，它提供了一些方便的功能，例如变量、嵌套规则和 mixin。

$container-padding: 0;

.container {
  padding: $container-padding !important;
}

import './style/variables.scss';
import './style/container.scss';

注意：

如果项目中已经存在 variables.scss 文件，只需要添加 $container-padding: 0; 这行代码即可。
如果项目中已经存在 container.scss 文件，只需要添加 .container { padding: $container-padding !important; } 这行代码即可。