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  |
'---------------'

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

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

这与此处的大多数CSS-height-tagged问题不同，但CSS div height won't expand和Fixed parent container height, child to expand/be-limited-to parent container可能相关。

如果可能的话，我正在使用纯CSS解决方案。我很好，只能在FF / Webkit /最近的IE中工作。

Answer 1

只有当您不需要在{Inner Variable Div'上放置background时，此答案才有效：

Live Demo

<强> CSS：

#container {
    background: #ccc;
    height: 400px;
    width: 300px;

    position: relative
}
#div1 {
    background: #999;
    height: 50px
}

#content {
    background: #ddd;
    overflow: hidden
}
#div3 {
    background: #999;
    position: absolute;
    bottom: 0;
    width: 100%
}

<强> HTML：

<div id="container">
    <div id="div1">I'm 50px.</div>

    <div id="content">I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br />I'm variable.<br /></div>

    <div id="div3">I'm unknown.<br />A<br />B<br />C</div>
</div>

Answer 2

至少在我看来，div3具有可变高度，这一点很复杂。

我使用的类似解决方案通常使最终div具有静态高度，然后使用高度100％和底部填充的组合等于最终div的高度，以允许中心内容适当地扩展。

您可以在包含内部变量div和内部div3的div上使用此技术，然后将绝对底部div3定位到该div（包装div为positon relative） - 但后来我相信调整浏览器/小分辨率或内容组合可能导致div3重叠内部变量div，反之亦然;我认为至少会让你更接近答案。

这是我能想到的最好的解决方案，遗憾的是使用了一些jQuery。

http://jsfiddle.net/G7fys/1/

Answer 3

在纯CSS中似乎没有办法做到这一点，并且在所有元素上仍然有不同的背景。所以我使用了一些小的javascript。

对应用程序感到好奇：我正在使用CSS创建Magic的模型：收集卡片。在这种情况下，我正在制作令牌：将http://www.magicmultiverse.net/cards/52371和http://www.magicmultiverse.net/cards/44771与the official equivalents进行比较。我希望文本框的大小只有它所需的大小。而且我将允许在大弯曲盒子后面的艺术。所以Javascript就是。

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

3 个答案: