How do I use calc(100%-50px) to minus the pixels from the top?

user_3879598 0
Viewed 6465

Currently I have two divs , One for my chart legend and one for my chart. I want to display the legend at the top. My legend is 50px; But when I use height: calc(100%-50px). It minuses the 50 pixels from the bottom. How do I minus the 50 pixels from the top and put my legend div there instead? I don't mind a solution which uses Javascript or even D3. A pure CSS solution would be nice.

.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>

BTW , I realize that the positioning of the div elements affect it as well. If for example , the legend div render 1st,then it will appear at the top. But in my case the chart div is 1st. So how to exchange the positions of the two divs?

css html
3 Answers

Did you try to do like this?

.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>

user_65848830

You can place it on top by

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

Then you may place it on bottom again

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

Assuming you want .treemap-chart to be a full-page element with the label sitting at top, you really do simply want to subtract 50px from the height of .treemap-chart. Because the elements will sit on top of one another, the chart will be offset by 50px, thus taking up all remaining room with 100vh.

This can be seen in the following:

.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>

However, if .legend has absolute positioning (based on your framework), you may be looking for margin-top on the chart to specify the offset. In this case, ironically, you don't actually need calc() at all for this; just leave the height as the height you want, and set margin-top to 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;
}
<div class="legend">Legend</div>
<div class="treemap-chart-container">
  <div class="treemap-chart">
    Chart
  </div>
</div>

user_23416030
Related