CSS：使一个中心div的高度展开以填充FIXED-HEIGHT容器中留下的内容 [英] CSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container

问题描述

对不起，这是另一个CSS高度100％（sortof）的问题...

我有这样的布局：

  ---------------。 
 |包含div |包含div的高度是FIXED 
 | .-----------。 | （为简单起见，说400px）
 | | Inner div1 | |内部div1的高度固定（比如50px）
 | '-----------'|内部div3具有静态但未知的内容，
 | .-----------。 |在渲染时间不知道高度
 | | Inner | |内部变量部分应该扩展到其余
 | |变量| |的空间 - 即我想消除
 | | Div | | 空白
 | '-----------'| 
 | .-----------。 | 
 | | Inner div3 | | 
 | |用固定| | 
 | | usercontent | | 
 | '-----------'| 
 |空白空间| 
'---------------'
  

这就是：一个固定高度的容器Div（比如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浏览器中工作。 解决方案

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

那些对应用程序感兴趣的人：我使用CSS来创建Magic：the Gathering cards的模型。在这种情况下，我正在制作令牌：比较 http://www.magicmultiverse.net/cards/52371 和 http://www.magicmultiverse.net/cards/44771 与< a href =http://magic.wizards.com/sites/mtg/files/image_legacy_migration/images/magic/daily/arcana/arc1244_15_zqtwqisn2i.png =nofollow noreferrer>官方 等值。我想让文本框大小只有它所需的大小。而且我会让艺术在大弯曲的盒子里面。所以它是Javascript。

Sorry guys, it's another CSS height "100%" (sortof) question...

I have a layout like this:

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

That's: one Container Div with a FIXED HEIGHT (say 400px). Several divs inside it, vertically stacked: div1, Variable Div, div3. At least one of them (div3) has static-but-unknown content, so I can't just slap pixel calculated heights on everything. Let's say for the sake of argument that div1+div3 WILL fit within Container Div.

I want to make Variable Div expand to fill the rest of the height within Container Div's 400px. But I can't specify its height as 100% because that ignores the slice that the other inner divs need, and overflows the Container Div.

This is different to most CSS-height-tagged questions on here, but CSS div height won't expand and Fixed parent container height, child to expand/be-limited-to parent container might be related.

I'm after a pure CSS solution if at all possible. I'm okay with it only working in FF/Webkit/very recent IE.

解决方案

There didn't seem to be a way to do it in pure CSS and still have different backgrounds on all the elements. So I resorted to using a little javascript.

Those curious about the application: I'm using CSS to create mockups of Magic: the Gathering cards. In this case, I'm making tokens: compare http://www.magicmultiverse.net/cards/52371 and http://www.magicmultiverse.net/cards/44771 with the official equivalents. I wanted to have the text box sized only as big as it needed to be. And I'm going to be allowing art behind the in the big curved box. So Javascript it was.

这篇关于CSS：使一个中心div的高度展开以填充FIXED-HEIGHT容器中留下的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！