2012-04-11 42 views
2

私は10%のマージンで画面の100%を満たすdivが必要です。その中には、上部にナビゲーションペインがあり、その後にパディングがあるコンテンツdivと、パディングがある内部コンテンツダイブがあります。ただし、100%の親の高さを使用し、マージン/パディングを追加すると、divは100%+ margin + paddingに伸びます。これのための修正はありますか?私は絶対的な位置づけのトリックに気づいたが、私は絶対に自分のコンテンツdivを配置すると、他のdivの流れを乱す。また、リサイジングとフローを非液体にします。これらのことを保ち、私の目標を達成するための方法は、CSSとjavascriptではなく、好きですか?以下は高さdiv詰め物100%

コード:

ASPX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <link rel="Stylesheet" href="test.css" /> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="navigation"> 
     </div> 
     <div id="content"> 
      <div id="inner"> 

      </div> 
     </div> 
    </div> 
</body> 
</html> 

CSS

html, body 
{ 
    height:100%; 
    width:100%; 
    margin:0px; 
    padding:0px; 
    background-color:Black; 
} 
#wrapper 
{ 
    height:100%; 
    margin:10px; 
    background-color:Blue; 
} 
#navigation 
{ 
    height:100px; 
    background-color:Green; 
} 
#content 
{ 
    height:100%; 
    padding:10px; 
    background-color:Orange; 
} 
#inner 
{ 
    height:100%; 
    width:100%; 
    padding:5px; 
    background-color:Lime; 
} 
+0

代わりのwrapper' '上のマージンを設定し、非常に良いですが、あなたは'ボディにpadding'を設定することができますか? – mrtsherman

+0

@mrtshermanそれでもhtmlの親要素よりも大きなbody要素が引き伸ばされます。 – steventnorris

+0

ラッパーのマージンを% – IrishChieftain

答えて

0

あなたは二つのことを試すことができます...

1)のラッパー、ナビゲーションの高さを変え、コンテンツや98%のようなものに内部。

2)ラッパーなどの要素に透明な1ピクセルの実線の枠線を追加してみます。これはしばしばマージンを要素のマージン関係にシフトさせる。

希望これは、あなたが同時に100%の高さとパディングを持つようにしたい任意の要素にbox-sizing:border-boxを追加してみてくださいすることができます

+0

パディングを%に入れても98%が機能します。そうしないと、誰かが確実に動作しない状況が見つかることがあります。 –

+0

1)パディングを%として使用しても、オフセット/ストレッチの問題が発生します。 2)境界線もストレッチ効果に加わります。したがって、マージン/パディングと本質的に同じ問題です。 – steventnorris

14

に役立ちます。

IE8 +と良いブラウザで動作するので、ブラウザのサポートは、実際に

http://css-tricks.com/box-sizing/

+0

したいです。私はIE7用に開発中です。私は上記のことを無視しました。ありがとう、結構です。私がより良い環境にいたら、それは金色になります。 – steventnorris

+0

これは素晴らしいことです。私はボックスサイズを認識しませんでした:border-boxはIE8でサポートされていました。私は非論理的なデフォルト・ボックス・モーダルと、一見単純なことを達成するために必要なラッパーDIVの量に非常に疲れています。私は今からすべての要素にこのボックスモーダルを適用します。 – Gavin

関連する問題