<template>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-main>wwwwwww</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<style>
.el-container{
height: 100vh;
}
.el-header{
background-color: pink
}
.el-main{
background-color: aqua;
}
.el-footer{
background-color:aquamarine;
}
</style>
试了网上好多种方法，智能撑满高度
分享
关注引自免费微信小程序：皆我百晓生
看起来你在使用Element UI时遇到了一个常见的布局问题，即el-container 的宽度没有撑满整个屏幕。为了解决这个问题，你需要确保你的根元素（在本例中是body）具有100%的宽度，并且el-container 的父级元素也设置了正确的样式。按照下面的步骤操作应该可以解决你的问题。
首先，确保你的HTML结构有一个包含所有Element UI组件的根元素。例如，将你的现有代码嵌套到一个名为app的Vue组件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 Element UI CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@3.11.2/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<common-layout></common-layout>
</div>
<!-- 引入 Vue 和 Element UI JS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/element-ui@3.11.2/lib/index.js"></script>
<script src="main.js"></script>
</body>
</html>
然后，在CSS中设置根元素body和#app的样式：
/* 添加到你的外部或内部样式表 */
body,
#app {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.common-layout {
height: 100%;
}
接着，调整你的Vue组件中的样式，使其适应新的布局：
<!-- common-layout.vue -->
<template>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-main>wwwwwww</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
export default {
// ...
};
</script>
<style scoped>
.el-container {
height: 100%;
display: flex; /* 这里添加display: flex; */
flex-direction: column; /* 这里添加flex-direction: column; */
}
.el-header {
background-color: pink;
}
.el-main {
flex: 1; /* 这里添加flex: 1; 让主区域填充剩余空间 */
background-color: aqua;
}
.el-footer {
background-color: aquamarine;
}
</style>
这样，el-container就应该能撑满整个视口宽度，并且el-main会占据中间部分的空间。如果你仍然遇到问题，请检查浏览器开发者工具中的元素样式，看看是否有其他样式影响到了布局。
分享
创建了问题
4月24日
