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

Question

我要问的是我用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实现吗？

Answer 1

是使用calc()功能:

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

height: calc(h - n - k);

Answer 2

如果您计划支持不支持的浏览器,那么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;
}

<div class="wrap">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

编辑:

这是没有box-sizing财产的奖金,只有绝对定位:

DEMO

html, body, .wrap {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrap {
    position: relative;
    width: 50%;
}
.one, .two, .three {
    position: absolute;
    left: 0;
    width: 100%;
    background: teal;
}
.one {
    height: 50px;
    top: 0;
}
.two {
    height: 80px;
    bottom: 0;
}
.three {
    top: 50px;
    bottom: 80px;
    background: gold;
}

<div class="wrap">
    <div class="one">... content 1 ...</div>
    <div class="two">... content 2 ...</div>
    <div class="three">...content 3 ...</div>
</div>