2012-04-11 63 views
3

これはかなりシンプルなはずです。私は100%の幅と100%の高さを常にカバーするために 'orange' divが必要です。div内のdiv(CSSの配置)

divの中には、親の「オレンジ」divの100%幅と高さを塗りつぶすために「green」divが必要です。

さらに、「オレンジ」divの中には常に10pxの「パディング」が必要です。

ウィンドウのサイズを変更すると、スクロールバーが表示されないように、それぞれのdivのサイズをそれぞれ変更する必要があります。

http://jsfiddle.net/URwpA/3/

+0

欲しいのであれば、オレンジ色のdivはパディングできません緑色のdivは完全に塗りつぶします。 –

+0

どのようにして2つの間の一定の10ピクセルを保つことがより良い質問かもしれません。 – captainrad

+0

これはどのブラウザで作業する必要がありますか? – Marko

答えて

6

最初の方法:

#hold { 
position:absolute; 
top:0px; 
left:0px; 
bottom:0px; 
right:0px; 
background:orange; 
padding:10px; 
} 
#held { 
position:relative; 
width:100%; 
height:100%; 
background:green; 
} 

第二の方法:

#hold { 
position:absolute; 
top:0px; 
left:0px; 
bottom:0px; 
right:0px; 
background:orange; 
} 
#held { 
position:absolute; 
top:10px; 
left:10px; 
bottom:10px; 
right:10px; 
background:green; 
} 

編集:私はコメントで要求されていると思うのレイアウトを達成するために私は考えることができる唯一の方法

<html style="height: 100%;"> 
    <body style="height: 100%;"> 
    <table style="height: 100%; width: 100%; border: 10px solid orange; background-color: green;"> 
     <!-- etc... --> 
    </table> 
    </body> 
</html> 
+0

パーフェクト、ありがとうございました! – captainrad

+1

内容をラッパーdivの外に漏らさずに、テーブル要素で同じことを実行できますか? – captainrad

+1

@captainradあなたはそれが何を意味しているかを理解するために、更新されたフィドルを見る必要があるかもしれないと思います。 – Neil

0

私はあなたがこのような何かを探していると考えていますか?

#hold { 
position:fixed; 
background:orange; 
width:100%; 
height:100%; 
padding:10px; 
} 
#held { 
position:relative; 
width:100%; 
height:100%; 
background:green; 
} 
+0

私は、右側と下側の両方にパディングが必要です。それはクロムやファイアフォックスに私のために表示されません。 – captainrad