今天用vue+el-container布局设置高度100vh之后发现比视口高出一截，如图
最右边红色标出的y轴滚动条，说明整个页面已经比视口要高了，仔细观察背景颜色也会发现上下有留白
代码上也没什么问题
<template>
<el-container class="container">
<el-header class="header">ChatGPT</el-header>
<el-main class="main">ChatGPT</el-main>
<el-footer class="footer">ChatGPT</el-footer>
</el-container>
</template>
<script setup lang="ts" name="layout">
</script>
<style>
.container {
display: flex;
height: 100vh;
width: 100%;
background-color: #fffdf9;
}
.header,
.main,
.footer {
padding: 0;
margin: 0;
}
</style>找了一圈，最终在vue项目的index.html文件当中加一段解决：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<!-- 解决方案：添加这一段 -->
<style>
html,
body {
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
扫一扫
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
