Question

目前，我有两个div，一个用于图表图例，一个用于图表。我想在顶部显示图例。我的传说是50px；但是当我使用高度时：calc（100％-50px）。它从底部减去50个像素。如何减去顶部的50个像素，然后将图例div放在那里？我不介意使用Java甚至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渲染为1st，则它将出现在顶部。但是在我的情况下，图表div是第一位。那么如何交换两个股利的位置呢？

Answer 1

您可以将其放在顶部

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

然后您可以将其再次放在底部

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

Answer 2

假设您希望.treemap-chart是一整页的标签，标签位于顶部，您确实只是想从50px的{{1}}中减去height 。由于元素将彼此重叠，因此图表将被.treemap-chart偏移，从而用50px占据了所有剩余空间。

这可以在下面看到：

100vh

.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;
}

/* Added to show in example */
body {
  margin: 0;
}

/* Added to show in example */
.legend {
  background: blue;
}

/* Added to show in example */
.treemap-chart-container {
  height: 100vh;
}

/* Added to show in example */
.treemap-chart {
  background: red;
}

但是，如果<div class="legend">Legend</div> <div class="treemap-chart-container"> <div class="treemap-chart"> Chart </div> </div>具有绝对定位（基于您的框架），则您可能会在图表上寻找.legend来指定偏移量。具有讽刺意味的是，在这种情况下，您实际上并不需要在{strong> all 处使用margin-top；只需将calc()保留为所需的高度，然后将height设置为margin-top：

50px

.treemap-chart-container .treemap-chart {
  display: inline-block;
  width: 100%;
  height: 100%;
  float: left;
  margin-top: 50px;
}

.legend {
  display: inline-block;
  width: 100%;
  height: 50px;
  overflow-y: scroll;
  float: left;
  position: absolute;
}


/* Added to show in example */

body {
  margin: 0;
}


/* Added to show in example */

.legend {
  background: blue;
}


/* Added to show in example */

.treemap-chart-container {
  height: 100vh;
}


/* Added to show in example */

.treemap-chart {
  background: red;
}

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

2 个答案: