html - 顶部和底部固定高度与流体高度中间

Question

我要问的是我使用 javascript 完成的事情，但我确实想仅使用 css(如果可能)实现它

场景如下:

我有一个高度为 h 像素的 DIV 元素。这个 DIV 元素有 3 个子元素，它们也是 DIV 元素。他们的目的如下:

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

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

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

我想要的是当我调整父 div 的大小时(这是一个 float 框)自动保留第三个 DIV 元素 h - (n+k) px。

仅使用 css 可以实现吗？

Answer 1

是的，使用calc()函数:

为您的第 3 个 div 设置 height CSS 属性为:

height: calc(h - n - k);