0

我需要创建元素，它覆盖整个页面，除了所有边的 20px 边距。我试试这个，它适用于 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;
}
4

3 回答 3

3

我建议：

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

这将使元素20px远离每一侧。但是我建议不要使用display: table-cell;，因为这需要一个父元素，display: table-row然后它本身需要一个带有display: table.

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

于 2013-07-03T09:49:08.737 回答
2

尝试这样的解决方案：

http://jsfiddle.net/cyHmD/

永远不要在 body 上使用position:absoluteand display:table- 保留这些属性，因为 body 是您构建站点其余部分的基础 - 最多使用 position:relative on 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;
}
于 2013-07-03T09:54:39.790 回答
1

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

#first
{
    display: table-cell;
    height: 100%;
    width: 100%;
    border: 20px solid blue;
    background-color: white;
}
于 2013-07-03T09:51:47.960 回答