顶部和底部固定高度,流体高度中间

我要问的是我用Javascript做过的事情,但我确实想用css实现它(如果可能的话)

这是场景:

我有一个DIV元素,其高度为h px.这个非常DIV元素也有3个子元素,它们也是DIV元素.他们的目的如下:

第一个DIV元素是k px高度,并附加到父容器的顶部.它的高度是恒定的.

第二个DIV元素是n px高度,并附加到父容器的底部.它的高度是恒定的.

第三个DIV元素是h - (n + k) px.

我想要的是当我调整父div(这是一个浮动框)以自动保持第三个DIV元素h - (n + k)px时.

这可能只用css实现吗？

是使用calc()功能:

为你的第3个div设置heightCSS属性:

height: calc(h - n - k);

如果您计划支持不支持的浏览器,那么calc()这是一种没有它的方法.

重点是使用绝对定位,填充(与附加的顶部和底部元素相同的高度)和box-sizing:border-box;:

DEMO

html,body,.wrap {
  height: 100%;
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}
.wrap {
  position: relative;
  width: 50%;
  padding: 50px 0 80px;
  border: 5px solid tomato;
}
.one,.two {
  position: absolute;
  left: 0;
  width: 100%;
  border: 5px solid teal;
}
.one {
  height: 50px;
  top: 0;
}
.two {
  height: 80px;
  bottom: 0;
}
.three {
  height: 100%;
  background: gold;
}