CSS:使一个中心div的高度扩展以填充FIXED-HEIGHT容器中的剩余部分

Question

对不起伙计们,这是另一个CSS高度"100%"(sortof)问题......

我有这样的布局:

 ---------------.   
|Containing div |   Containing div's height is FIXED
| .-----------. |     (say 400px for simplicity)
| |Inner div1 | |   Inner div1 has height fixed (say 50px)
| '-----------' |   Inner div3 has static-but-unknown content, 
| .-----------. |     height not known at render time
| |Inner      | |   Inner Variable Div should expand to the rest
| |Variable   | |     of the space - i.e. I want to eliminate
| |Div        | |     the "blank space"
| '-----------' |
| .-----------. |
| |Inner div3 | |
| |with fixed | |
| |usercontent| |
| '-----------' |
|  blank space  |
'---------------'

那是:一个具有固定高度的容器分区(比如400px).里面有几个div,垂直堆叠:div1,Variable Div,div3.其中至少有一个(div3)具有静态但未知的内容,所以我不能只是将像素计算的高度打到一切.让我们说为了论证div1 + div3将适合Container Div.

我想让Variable Div扩展以填充Container Div的400px中的其余高度.但我无法将其高度指定为100%,因为它忽略了其他内部div所需的切片,并溢出了Container Div.

这与此处的大多数CSS高度标记问题不同,但CSS div高度不会扩展并且固定父容器高度,要扩展/限制到父容器的子可能是相关的.

如果可能的话,我会使用纯CSS解决方案.我很好,只能在FF/Webkit /非常新的IE中工作.

Answer 1

似乎没有办法在纯 CSS 中做到这一点，并且所有元素仍然具有不同的背景。所以我求助于使用一点JavaScript。

那些对该应用程序感到好奇的人：我正在使用 CSS 创建《万智牌》的模型。在本例中，我正在制作令牌：将http://www.magicmultiverse.net/cards/52371和http://www.magicmultiverse.net/cards/44771与官方 等效项进行比较。我想让文本框的大小只达到它需要的大小。我将允许艺术在大弧形盒子后面。Javascript 就是这样。