但这样一来饼图被固定在了屏幕的底部，而不是父级元素的底部

非常抱歉，我理解错了你的意思。如果你希望将饼图放在父元素的底部，可以使用flex布局。将父元素设置为display: flex，并将flex-direction属性设置为column，这样子元素就会从上到下依次排列。然后，将饼图的高度设置为0，并将flex-grow属性设置为1，这样饼图就会占据父元素剩余的空间，从而实现将饼图放在父元素的底部的效果。

示例代码如下：

HTML

<div class="parent">
  <div class="content"></div>
  <div class="pie"></div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: column;
  height: 500px; /* 为了演示效果，这里设置了父元素的高度 */
}

.content {
  flex-grow: 0;
  height: 100px; /* 为了演示效果，这里设置了内容元素的高度 */
}

.pie {
  flex-grow: 1;
  height: 0;
}

这样，饼图就会被放置在父元素的底部，而不是屏幕的底部了。