html - 如何使用 calc(100%-50px) 从顶部减去像素？

Question

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

.treemap-chart-container .treemap-chart {
  display: inline-block;
  width: 100%;
  height: calc(100% - 50px);
  float: left;
}

.legend {
  display: inline-block;
  width: 100%;
  height: 50px;
  overflow-y: scroll;
  float: left;
}

<div class="treemap-chart-container">
  <div class="treemap-chart"></div>
  <div class="legend" id="legendContainer"></div>
</div>

顺便说一句，我意识到 div 元素的定位也会影响它。例如，如果图例 div 渲染第一个，那么它将出现在顶部。但在我的例子中，图表 div 是第一个。那么如何交换两个div的位置呢？

Answer 1

你试过这样做吗？

.container{
   height:100vh;
   background:lightblue;
}

.legend{
   height:50px;
   background:red;
}

.chart{
   height:calc(100% - 50px);
   background:lightgreen;
}

<div class="container">
   <div class="legend">legend 50px</div>
   <div class="chart">chart calc(100% - 50px);</div>
</div>