固定高さと動的幅と高さが

以下になるようにレイアウトを作成するにはどうすればよいのですか？divの下に固定高さdivがあり、残りの部分は常にページの高さと幅です。したがって、ウィンドウのサイズを変更すると、2番目のdivの高さと幅がそれに応じてサイズ変更されます。固定高さと動的幅と高さが

私が達成したいものの例は、これまでのところ、私はこの思い付いたhttp://omegle.com/

に似て発見された：

<html> 
<head> 
<body style="width:100%;height:100%;position:absolute;background:#EEE;margin:0 auto"> 
<div style="border-bottom:1px solid #000;height:50px;background:#900">1st div</div> 
<div style="height:100%;width:100%;background:#090">2nd div</div> 
</body> 
</html>

これが私の上に固定のdiv、およびサイズ変更可能なのdivのを与えますしかし、2番目のdivは固定divの高さを考慮していないので、divは私が望むよりも高さが高くなります。 div 2の高さ％を80％とすると、それはフィットしますが、上の固定高さブロックのためにウィンドウのサイズを変更すると一定ではありません。

私はJavaScriptの無料のソリューションを探しています。

出典

2011-09-17 John

本文にコンテンツの背景色を与えないのはなぜですか？

demo fiddleを参照してください。

CSS：

html, 
body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    background: #090; 
} 
#header { 
    border-bottom: 1px solid #000; 
    height: 50px; 
    background: #900; 
}

そして、あなたのようなthis fiddleで、絶対にそれを置いた後、ウィンドウの一番下に伸ばして、本当にコンテンツを必要とする：

CSS：

#content { 
    position: absolute; 
    top: 51px; 
    bottom: 0; 
    background: #090; 
}

出典

2011-09-17 19:53:32 NGLN

この意志プレーンテキストコンテンツの場合にのみ動作しますが、その内部に別のブロック要素を追加すると、サイズを変更する必要があります。たとえば、次のようになります。http://jsfiddle.net/MNNYf/7/ – John

ab溶質の配置、編集を参照してください。 – NGLN

固定高さと動的幅と高さが

答えて

関連する問題