How to calculate the height of the middle div(3 divs) using the calc() CSS

Question

Is it possible to use calc() function of css3 for the following usecase? I have a header having certain padding and then I have bottom having buttons. The header height and the bottom height is fixed, however the content height which is in between header and bottom needs to be dynamic based on what height we provide to the container

ex:I'm using the calc() to calculate the height based on the main class. CSS:

.header {
  height: 30px;

  background-color: red;
  padding: 20px 54px;
}

.bottom {

  height: 40px;
  background: green;
  padding: 60px 54px;
}

.middle-content {
  background: blue;
  padding: 20px 54px;
  height: calc(100% - (300-200)+"px");//height of main class div - (header + bottom)//is this possible to calculate this way

}

.main {
  border: 2px solid #000;
  width: 100%;
}

html:

<div class="main" style="height:400px">
<div class="header">the header height is fixed and cannot be changed</div>
<div class="middle-content">this div needs to grow/shrink depending on what height we enter in the inline style of "main" class to match up to the height of the main class</div>
<div class="bottom">
the bottom height is fixed and cannot be changed
  <button>
  Trext1
  </button>
   <button>
  Text333
  </button>
</div>
</div>

fiddle: https://jsfiddle.net/95j04gdz/2/

from the fiddle you can see there is a white space that needs to be filled correctly by the blue div to match up to the height of main div. Any ideas??

possible duplicate of : https://stackoverflow.com/q/90178/8620333 (you find easier way than doing complex calc) — Temani Afif, Feb 27 '19 at 19:59

score 1 · Answer 1 · answered Feb 27 '19 at 19:54

You should consider using box-sizing: border-box here, as it will solve the issue of the middle block's paddings.

* {
  box-sizing: border-box;
}

.header {
  height: 70px;

  background-color: red;
  padding: 20px 54px;
}

.bottom {
 
  height: 160px;
  background: green;
  padding: 60px 54px;
}

.middle-content {
  background: blue;
  padding: 20px 54px;
  height: calc(100% - (70px + 160px));
}

.main {
  border: 2px solid #000;
  width: 100%;
}

<div class="main" style="height:400px">
<div class="header">the header height is fixed and cannot be changed</div>
<div class="middle-content">this div needs to grow/shrink depending on what height we enter in the inline style of "main" class to match up to the height of the main class</div>
<div class="bottom">
the bottom height is fixed and cannot be changed
  <button>
  Trext1
  </button>
   <button>
  Text333
  </button>
</div>
</div>
<!-- the white space needs to be filled correctly by growing the blue color div -->

score 1 · Accepted Answer · answered Feb 27 '19 at 20:00

You can use this code when heights are dynamic.

const headerHeight = document.querySelector(".header").offsetHeight;
const bottomHeight = document.querySelector(".bottom").offsetHeight;
const middle = document.querySelector(".middle-content");

middle.style.height = `calc(100% - (${headerHeight}px + ${bottomHeight}px))`;

* {
  box-sizing:border-box;
}

.header {
  height: 30px;
  background-color: red;
  padding: 20px 54px;
}

.bottom {
 
  height: 40px;
  background: green;
  padding: 60px 54px;
}

.middle-content {
  background: blue;
  padding: 20px 54px;
  /*height: calc(100% - (300-200)+"px");*/
  /*//height of main class div - (header + bottom)*/
}

.main {
  border: 2px solid #000;
  width: 100%;
}

<div class="main" style="height:400px">
<div class="header">the header height is fixed and cannot be changed</div>
<div class="middle-content">this div needs to grow/shrink depending on what height we enter in the inline style of "main" class to match up to the height of the main class</div>
<div class="bottom">
the bottom height is fixed and cannot be changed
  <button>
  Trext1
  </button>
   <button>
  Text333
  </button>
</div>
</div>

How to calculate the height of the middle div(3 divs) using the calc() CSS

2 Answers2