Html 如何使用calc（100%-50px）从顶部减去像素？

目前我有两个div，一个用于图表图例，另一个用于图表。 我想在顶部显示图例。我的传奇是50px；但当我使用高度：calc（100%-50px）。它从底部减去50个像素。如何从顶部减去50个像素并将图例div放在那里？我不介意使用Javascript甚至D3的解决方案。一个纯CSS解决方案会很好

.treemap图表容器.treemap图表{
显示：内联块；
宽度：100%；
高度：计算（100%-50px）；
浮动：左；
}
.传奇{
显示：内联块；
宽度：100%；
高度：50px；
溢出y：滚动；
浮动：左；
}

---

你试过这样做吗

.container{
高度：100vh；
背景：浅蓝色；
}
.传奇{
高度：50px；
背景：红色；
}
.图表{
高度：计算（100%-50px）；
背景：浅绿色；
}

图例50px
图表计算（100%-50px）；

假设您希望

.treemap chart

是一个标签位于顶部的完整页面元素，那么您只需从

的
高度
中减去
50px
。由于元素将彼此重叠，图表将偏移
50px
，从而占用
100vh
的所有剩余空间

这可以从以下几点看出：


.treemap图表容器.treemap图表{
显示：内联块；
宽度：100%；
高度：计算（100%-50px）；
浮动：左；
}
.传奇{
显示：内联块；
宽度：100%；
高度：50px；
溢出y：滚动；
浮动：左；
}
/*添加以在示例中显示*/
身体{
保证金：0；
}
/*添加以在示例中显示*/
.传奇{
背景：蓝色；
}
/*添加以在示例中显示*/
.treemap图表容器{
高度：100vh；
}
/*添加以在示例中显示*/
.树形图{
背景：红色；
}
图例
图表
您可以通过

.treemap-chart-container { display: flex; flex-direction: column-reverse; }

然后你可以再把它放在底部

.treemap-chart-container { display: flex; flex-direction: column; }

请尝试
.treemap图表容器{display:flex；flex direction:column reverse；}
谢谢。你愿意把这个作为你的答案吗？我会把它标记为正确的。而且我还有图例位置配置。那么，如果将其设置为底部，如何将其重置回底部呢。弯曲方向是一种风格，对吗？不是属性？我想是因为我需要减去底部的像素？因为从我看到的情况来看，在我将flex方向更改为column@SyedAriff或者，您可以使用
.treemap图表容器{display:block；}
将其再次放在底部，因为play:block只是将整个图例div从视图中删除。