Question

我有一个设置要求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;
}

Answer 1

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

适用于IE8 +和优秀的浏览器，因此浏览器支持实际上非常好

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

Answer 2

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

1）将包装器，导航，内容和内部的高度更改为98％。

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

希望这有帮助

高度100％填充填充

2 个答案: