CSS：それは別のCSSの高さは「100％」（sortof）質問ですね、一つの中心のdivの高さは、高さが固定された容器に

Question

申し訳ありませんが、みんなが残っているものを埋めるために拡張してください...私はこのようなレイアウトを持って

：

---------------. 
|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）を持つ1つのコンテナ部門です。その中にdiv1、Variable Div、div3という縦に積み重ねられた複数のdivがあります。それらのうちの少なくとも1つ（div3）は静的ではあるが未知のコンテンツを持っているため、すべてのピクセルの高さを計算するだけではありません。 div1 + div3がContainer Divに収まるという議論のために、

コンテナ部門の400px内の残りの部分を埋めるように変数Divを展開したいと考えています。しかし、その高さを100％と指定することはできません。これは、他の内部divが必要とするスライスを無視し、Container Divsをオーバーフローさせるためです。

これはほとんどのCSS高さタグ付き質問とは異なりますが、CSS div height won't expandとFixed parent container height, child to expand/be-limited-to parent containerが関連している可能性があります。

可能であれば、私は純粋なCSSソリューションの後にいます。私はFF/Webkit /非常に最近のIEで働いているだけで大​​丈夫です。

Answer 1

純粋なCSSでそれを行うと、まだすべての要素に異なる背景を持つ方法があるようには思えませんでした。だから私は少しのJavaScriptを使うことに頼った。

アプリケーションについて興味がある人：私は、Magic：the Gatheringカードのモックアップを作成するためにCSSを使用しています。この場合、私はトークンを作っています：http://www.magicmultiverse.net/cards/52371とhttp://www.magicmultiverse.net/cards/44771をthe officialequivalentsと比較してください。私はテキストボックスを必要なだけ大きなサイズにしたいと思っていました。そして、私は大きな曲がった箱の中でアートの後ろにいることを許しています。だからJavascriptはそれだった。

Answer 2

この答えは、あなたが "内部変数本部" に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 3

これは少なくとも私の心の中ではdiv3という可変の高さで複雑になりました。

私が通常使っていた同様の解決策は、最終的なdivが静的な高さであるようにしてから、中央のコンテンツが適切に拡張できるように、最終のdivの高さに等しい高さ100％ 。

内部変数divと内部div3をラップし、divの絶対位置の下位div3を配置することができます（折り返しdivはpositon相対です）。しかし、ブラウザのサイズを小さくするとdiv3を内部変数divと重複させる可能性があります。私はそれが少なくともあなたが答えに近づくだろうと思う。

---

残念なことに、jQueryのダッシュを使用して、これが私が思いつく最良の解決策です。

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