高度100%填充填充

我有一个设置要求div填充100%的屏幕,边距为10px . 在其中,顶部有一个导航窗格,后面是一个内容div,下面有一个填充和一个带有填充的内部内容潜水 . 但是,使用父级的100%高度然后添加边距/填充将div拉伸到100%边距填充 . 有没有解决这个问题?我注意到绝对定位技巧,但是如果我绝对定位我的内容div,那会弄乱其他div的流程 . 它还使调整大小和流动非液体 . 任何方式来保持这些东西仍然实现我的目标,最好是使用CSS而不是javascript?

代码如下:

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

回答(2)

3 years ago

您可以尝试将 box-sizing:border-box 添加到要同时具有100%高度和填充的任何元素上 .

适用于IE8和良好的浏览器,因此浏览器支持实际上相当不错

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

3 years ago

你可以尝试两件事......

1)将包装,导航,内容和内部的高度改为98% .

2)尝试向包装器和其他元素添加透明的1px实线边框 . 这通常会将边际转移到元素的边际关系 .

希望这可以帮助