ダイナミックDIVボックスの高さDIV

私は以下に概略的に絵で提示CSSスタイルとHTMLを構築しようとしています： alt text http://www.freeimagehosting.net/uploads/216e5750a8.png ダイナミックDIVボックスの高さDIV

私は、次のHTMLで、内側のdivを配置するために管理します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<body> 
<div style="background-color: yellow; width: 100px; height: 100px; 
position: relative;"> 
    <div style="background-color: gray; position: absolute; 
    top: 8px; left: 8px; right: 8px; bottom: 8px"></div> 
</div> 
</body> 
</html>

しかし、問題は、外側のdivの高さを動的にしたい場合には機能しなくなることです。高さ値を削除すると、外側のdivが隠されます。

これはどのようにすべての条件で達成できましたか？

出典

2009-07-02 Gennady Shumakher

実際に達成しようとしていることは何ですか？外側のDIVの高さにかかわらず、内側のDIVを垂直にセンタリングするには？ –

外側のdiv内にコンテンツがない場合、それ自体が崩壊します。内側のdivの中にコンテンツがありますか？ – peirix

はい内側のdivに内容があります –

幅 'W'は知られていますか？ああ、それはやや無関係です...

OK、あなたはあなたがそれを望むところで外側のdivを配置すると仮定します。：

<div style="float:left; background-color:yellow; width:100px;"> 
    <div style="background-color:gray; margin:8px;">You need enough content here to push the width out far enough...</div> 
</div>

あなたはポジショニングが正しい取得するために、さらに外側のdivの中に外のdivを配置する必要があるかもしれませんが、外側のdivが（左または右 - それは重要ではありません）フロート変数を持っている必要があります。

これらのdivに罫線やパディングなどを追加することができます。全体のプロセスの鍵は、外側のdivに存在するfloat値です。

出典

2009-07-03 08:10:30

どこでこれを行うのかわからない。しかし、それはちょうど内側のdivの周りにパディングを持っていると思われる？

<div style="background-color: yellow; width: 100px; 
      position: relative; padding: 8px"> 
<div style="background-color: gray;">Hello</div>

この方法では、内部のdivの内容は、外側のdivの高さを変更します...

出典

2009-07-02 11:30:42 peirix

この場合、動的位置divは1つだけです。 –

この解決方法は問題ありませんが、パディングはdivの幅を広げるので、100px幅にするには幅を入れます：84px;パディング：8px –

[相対位置オブジェクトにのみ絶対位置のオブジェクト[S]を持っている場合は、高さを修正する必要があります相対位置オブジェクトの値。

ヒント。 JavaScriptを使用して高さの値を変更することも、相対位置オブジェクトの最小高さ（CSS 2+）のプロパティを定義することもできます。

出典

2009-07-02 11:43:55

ダイナミックDIVボックスの高さDIV

答えて

関連する問題