Angular中Chart.js图表容器出现滚动条无法适配屏幕如何解决

滚动问题与Chart.js配置无关，现有responsive: true、maintainAspectRatio: false配置完全正确，问题来自三个CSS布局细节：

• 盒模型计算偏差：.main容器设置的min-height: calc(100vh - 60px)为内容区高度，默认content-box盒模型下，容器添加的2px边框会额外占据垂直空间，直接导致总高度超出视口
• 垂直空间累加溢出：.charts容器有上下20px内边距，.chart卡片自带20px内边距，叠加canvas父级硬编码的600px固定高度，三层垂直尺寸总和超出容器可用高度
• canvas默认行高间隙：canvas为行内替换元素，默认底部会保留3-4px的行高基线间隙，就是观察到的“轻微滚动位移”的差值

直接调整布局为弹性自适应结构，让图表容器自动占满头部下方的全部剩余视口空间，从根源避免滚动条：

1. 全局重置盒模型与默认边距，避免边框、内边距撑大容器
2. 改用固定高度+100%高度层层传递的布局逻辑，去掉canvas父级的硬编码600px高度，让图表区域自动填充剩余空间
3. 将canvas设置为块级元素，消除底部默认间隙
4. 移除调试用的彩色边框（这类边框会额外占据高度，调试完成后可删除）

修正后代码 #

HTML部分 #

<div class="container">
    <div class="topbar">
        <div class="logo"></div>
        <div class="search">
            <input type="text" id="search" placeholder="search here">
            <label for="search"><i class="fas fa-search"></i></label>
        </div>
        <i class="fas fa-bell"></i>
        <div class="user">
            <img src="" alt="no Image available">
        </div>
    </div>
   
    <div class="main">
        <div class="charts">
            <div class="chart">
                <!-- 移除硬编码行内高度，交给布局自适应 -->
                <div class="chart-canvas-wrap">
                    <canvas 
                        baseChart 
                        [datasets]="barChartData"
                        [labels]="barChartLabels" 
                        [options]="barChartOptions" 
                        [plugins]="barChartPlugins" 
                        [legend]="barChartLegend"
                        [type]="barChartType">
                    </canvas>
                </div>
            </div>
        </div>
    </div>
</div>

注：同步修正了原代码中seacrh、serach的拼写错误

SCSS部分 #

// 全局重置，放置在样式文件最顶部
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.user{
    position: relative;
    width:50px;
    height:50px;
    border:2px solid blue;
}

.user img{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}

.topbar{
 position: fixed;
 background: #fff;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
 width:100%;
 height:60px;
 padding:0 20px;
 display: grid;
 grid-template-columns: 2fr 10fr 0.4fr 1fr;
 align-items: center;
 z-index: 1;
}

.logo h2{
    color: #299B63;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input{
    width:100%;
    height:40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
}

.search i{
    position: absolute;
    right:15px;
    top:15px;
    cursor: pointer;  
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

//main section
.main{
     position: absolute;
     top:60px;
     left: 0;
     width:100%;
     // 替换min-height为固定高度，避免内容溢出撑开容器
     height: calc(100vh - 60px);
     background: #f5f5f5;
     overflow: hidden;
 }

.cards{
     width:100%;
     padding:35px 20px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px;
 }

.cards .card{
     padding: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 7px 25px 0 rgba(0,0,0,0.08);
 }

.number{
     font-size: 35px;
     font-weight: 500;
     color: #299B63;
 }

.card-name{
     color: #888;
     font-weight: 600;
 }

.icon-box i{
     font-size: 600;
     color: #299B63;
 }

//charts css
.charts{
     display: grid;
     grid-template-columns: 1fr;
     grid-gap: 20px;
     width: 100%;
     height: 100%;
     padding: 20px;
 }

.chart{
     background: #fff;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 7px 25px rgba(0,0,0,0.08);
     width: 100%;
     height: 100%;
}

.chart-canvas-wrap {
  position: relative;
  height: 100%;
  width: 100%;
}

// 消除canvas底部默认行高间隙，强制撑满容器
canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

TS部分 #

原有配置无需修改，保持现有responsive: true和maintainAspectRatio: false即可。

调整完成后图表会自动适配头部以下的全部屏幕区域，无滚动条，窗口尺寸变化时会自动响应，不需要针对小屏设备单独编写媒体查询调整高度。

内容的提问来源于stack exchange，提问作者Audentes