Question

是否可以在以下用例中使用css3的calc（）函数？我的标题有一定的填充，然后我的底部有按钮。标头高度和底部高度是固定的，但是根据我们提供给容器的高度，标头和底部之间的内容高度必须是动态的

ex：我正在使用calc（）基于main类来计算高度。 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>

提琴： https://jsfiddle.net/95j04gdz/2/

从小提琴中可以看到有一个空白区域，需要用蓝色div正确填充以匹配主div的高度。有什么想法吗？

Answer 1

您应该在此处考虑使用box-sizing: border-box，因为它将解决中间块的填充问题。

* {
  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 -->

Answer 2

动态高度时可以使用此代码。

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>

如何使用calc（）CSS计算中间div（3 divs）的高度

2 个答案: