高度 div 100% 带填充答案

【问题标题】：Height div 100% with a padding高度 div 100% 带填充
【发布时间】：2012-04-23 21:35:01
【问题描述】：

我的设置要求 div 填充 100% 的屏幕，边距为 10 像素。在里面，顶部有一个导航窗格，下面是一个带有填充的内容 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;
}

【问题讨论】：

你可以在正文上设置padding，而不是在wrapper 上设置边距？
@mrtsherman 它仍然将body元素拉伸得比html父元素大。
尝试将包装器的边距设置为 %
我觉得很好jsfiddle.net/azrXw

标签： css html height

【解决方案1】：

你可以尝试两件事...

1) 将包装、导航、内容和内部的高度更改为 98%。

2) 尝试为包装器和其他元素添加一个透明的 1px 实心边框。这通常会改变元素的边距与边距关系。

希望对你有帮助

【讨论】：

如果您也将填充放在 % 中，则 98% 将起作用。否则，您可以肯定有人会发现这种情况无法可靠地工作！
1) 即使使用填充作为 %，仍然会产生偏移/拉伸问题。 2）边框也增加了拉伸效果，所以本质上与边距/填充相同。

【解决方案2】：

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

在IE8+和不错的浏览器下工作，所以浏览器支持其实还不错

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

【讨论】：

我希望。我正在为 IE7 开发。我忽略了上面提到的。不过还是谢谢你。如果我在一个更好的环境中，那会很有效。
这很棒。我没有意识到 IE8 支持 box-sizing:border-box 。我非常厌倦不合逻辑的默认框模式和完成看似简单的事情所需的包装器 DIV 的数量。从现在开始，我将把这个框模式应用到所有元素。