4

画面の 100% を 10px のマージンで埋める div を必要とするセットアップがあります。その内部には、上部にナビゲーション ペインがあり、その下にパディング付きのコンテンツ div と、パディング付きの内部コンテンツ ダイブがあります。ただし、親の 100% の高さを使用してからマージン/パディングを追加すると、div が 100% + マージン + パディングに引き伸ばされます。これに対する修正はありますか？絶対配置のトリックに気付きましたが、コンテンツ div を絶対配置すると、他の div の流れが台無しになります。また、サイズ変更とフローを非液体にします。これらのことを維持し、できればJavaScriptではなくCSSを使用して目標を達成する方法はありますか?

以下のコード:

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;
}
4

2 に答える 2