私は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;
}
代わりのwrapper' '上のマージンを設定し、非常に良いですが、あなたは'ボディにpadding'を設定することができますか? – mrtsherman
@mrtshermanそれでもhtmlの親要素よりも大きなbody要素が引き伸ばされます。 – steventnorris
ラッパーのマージンを% – IrishChieftain