Question

我需要创建元素，覆盖整个页面，除了所有方面的20px边距。我尝试this它可以在webkit浏览器和Firefox中运行，但Internet Explorer（10）和Opera有这个问题:-(。有什么想法解决这个问题吗？

HTML

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

CSS

head, body
{
    width: 100%;
    height: 100%;
}

body
{
    position: absolute;
    margin: 0;
    background-color: blue;
    display: table;
}

#first
{
    display: table-cell;
    height: 100%;
    width: 100%;
    padding: 20px;
}

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

Answer 1

我建议：

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

将元素20px放置在远离每个边的位置。但是，我建议不使用display: table-cell;，因为这需要父元素拥有display: table-row，而display: table本身则需要{{1}}的父元素。

此外，看起来您正在尝试模拟基于表格的布局，如果您可以列出您尝试解决的整体问题，则可能会获得更好/更有用的答案。

Answer 2

尝试这样的解决方案：

http://jsfiddle.net/cyHmD/

从不在正文上使用position:absolute和display:table - 保留这些属性，因为正文是构建网站其余部分的基础 - 最多使用position：相对于body标签。 box-sizing更改了浏览器框模型的计算方式 - 例如，不是计算100% width + 20% padding + 20% border = 140%，而是计算为100% width + 20% padding + 20% border = 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;
}

Answer 3

this怎么样？只需用边框替换所需的边距：

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

元素必须覆盖整页，除了20px边距

3 个答案: