javascript - 我如何设置 ChartJS 的样式使其始终位于 div 的底部？

Question

我已经尝试了所有我能想到的。我似乎无法让图表尊重到达 div 的底部。我已经在此 Codepen 中复制了我的图表，以便于 fork 和编辑。我基本上直接从 devtools 复制并粘贴我的 CSS 到 codepen https://codepen.io/spkellydev/pen/JwQqKr?editors=1011

CSS :
#myChart {
  animation-delay:0s;
  animation-direction:normal;
  animation-duration:0.001s;
  animation-fill-mode:none;
  animation-iteration-count:1;
  animation-name:chartjs-render-animation;
  animation-play-state:running;
  animation-timing-function:ease;
  box-sizing:border-box;
  color:rgb(78, 78, 78);
  display:block;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:16px;
  font-weight:400;
  height:192px;
  line-height:24px;
  overflow-wrap:break-word;
  text-align:left;
  text-size-adjust:100%;
  width: 385px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.myChart {
  background-color:rgb(236, 236, 236);
  border-left-color:rgb(0, 166, 217);
  border-left-style:solid;
  border-left-width:3px;
  box-sizing:border-box;
  color:rgb(78, 78, 78);
  display:block;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:16px;
  font-weight:400;
  height:296px;
  line-height:24px;
  margin-bottom:24px;
  margin-top:48px;
  min-height:296px;
  overflow-wrap:break-word;
  position:relative;
  text-align:left;
  text-size-adjust:100%;
  width:387.703px;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

我正在尝试让 div 看起来像这张图片

Answer 1

.myChart {
  display: flex;
  flex-direction: column;
}
.myChart p {
  flex-grow: 1;
}

将图表置于底部。但是，当前图表包含填充。您可以使用图表设置来删除它们，也可以将其大小设置得更大一点，给它负边距并 overflow hidden 。