填充高度100％

我有一个安装程序，需要填充100％的屏幕，边距为10px。在里面，顶部有一个导航窗格，后面跟着一个内容div，内容是填充，内部内容是填充。但是，使用父级的100％高度，然后添加一个边距/填充可将div延伸至100％+边距+填充。有没有解决这个问题？我注意到了绝对定位技巧，但是如果我绝对放置我的内容div，则会扰乱其他div的流动。它也使调整和流动非液体。任何方式来保持这些东西，仍然实现我的目标，最好用CSS而不是JavaScript？填充高度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; 
}

来源

2012-04-11 steventnorris

而不是设置上'wrapper'保证金的，你可以设置'对身体padding'？ – mrtsherman 2012-04-11 14:47:51

@mrtsherman它仍然拉伸大于html父元素的body元素。 – steventnorris 2012-04-11 14:50:51

尝试设置包装的边距为％ – IrishChieftain 2012-04-11 14:54:40