Css 元素必须覆盖除20px页边距以外的整页

我需要创建元素，包括整个页面，除了20像素的所有方面的空白。我尝试在webkit浏览器和Firefox中使用它，但是InternetExplorer（10）和Opera对此有问题：-（.你知道如何解决这个问题吗

HTML

<div id="first">
    <div id="second">
        Hello world!
    </div>
</div>

我建议：

#first {
    display: table-cell;
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}

这将使元素

20px

远离每一侧。但是我建议不要使用

display:table cell；

，因为这需要父元素具有

display:table行

，而该行本身需要具有

display:table

的父元素

此外，您似乎正在尝试模拟基于表格的布局，如果您能列出您试图解决的总体问题，您可能会得到更好/更有用的答案。

我建议：

#first {
    display: table-cell;
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}

这将使元素

20px

远离每一侧。但是我建议不要使用

display:table cell；

，因为这需要父元素具有

display:table行

，而该行本身需要具有

display:table

的父元素

此外，您似乎正在尝试模拟基于表格的布局，如果您能列出您试图解决的总体问题，您可能会得到更好/更有用的答案。

怎么样？只需将所需的边距替换为边框：

#first
{
    display: table-cell;
    height: 100%;
    width: 100%;
    border: 20px solid blue;
    background-color: white;
}

如何？只需将所需的边距替换为边框：

#first
{
    display: table-cell;
    height: 100%;
    width: 100%;
    border: 20px solid blue;
    background-color: white;
}

---

尝试以下解决方案：

决不在主体上使用

位置：绝对

和

显示：表格

-保持这些属性不变，因为主体是构建站点其余部分的基础-最多使用位置：相对于主体标记。

框大小

更改浏览器框模型的计算方式-例如，代替计算计算

100%宽度+20%填充+20%边框=140%

它计算为

100%宽度+20%填充+20%边框=100%

此解决方案将从IE7开始工作，包括IE7

head, body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}

body {
    background-color: blue;
}

#first
{
    position:absolute;
    width:100%;
    height:100%;
    padding:20px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#second
{
    height: 100%;
    width: 100%;
    background-color: white;
}

---

尝试以下解决方案：

决不在主体上使用

位置：绝对

和

显示：表格

-保持这些属性不变，因为主体是构建站点其余部分的基础-最多使用位置：相对于主体标记。

框大小

更改浏览器框模型的计算方式-例如，代替计算计算

100%宽度+20%填充+20%边框=140%

它计算为

100%宽度+20%填充+20%边框=100%

此解决方案将从IE7开始工作，包括IE7

head, body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}

body {
    background-color: blue;
}

#first
{
    position:absolute;
    width:100%;
    height:100%;
    padding:20px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#second
{
    height: 100%;
    width: 100%;
    background-color: white;
}

---

显示：IE不正确支持表属性，不鼓励使用。注意：值“内联表”、“表”、“表标题”、“表单元格”、“表列”、“表列组”、“表行”、“表行组”和“继承”IE7和早期版本中不支持。IE8需要！DOCTYPE。IE9支持这些值。显示：IE不正确支持表属性，不建议使用。注意：值“内联表”、“表”、“表标题”、“表单元格”、“表列”、“表列组”、“表行”、“表行组”和“继承”IE7和早期版本中不支持。IE8需要！DOCTYPE。IE9支持这些值。Opera中有点错误，但如果我不使用

display:table

，可能是最好的解决方案。谢谢；-）@马特·博科恩歌剧中的错误是什么？我们也可以解决这个问题。尽管我不会为opera操心太多，但它的使用率非常低，而且他们正在简化其Presto引擎，以尽快打开webkit。opera只对水平调整大小（，）做出响应。但没关系；-）Opera中有点问题，但如果我不使用

display:table

，可能是最好的解决方案。谢谢；-）@马特·博科恩歌剧中的错误是什么？我们也可以解决这个问题。尽管我不会为opera操心太多，但它的使用率非常低，而且他们正在简化其Presto引擎，以尽快打开webkit。opera只对水平调整大小（，）做出响应。但没关系；-）在IE8和IE7中，这将是一个错误，因为在不指定宽度的情况下，它们在呈现这种技术时会遇到问题。另外，IE7不支持

表格单元格

。这在IE8和IE7中将是一个错误，因为它们在不指定宽度的情况下呈现此技术时存在问题。此外，IE7不支持

表格单元格

。