元素必须覆盖整个页面，除了20px的余量

我需要创建元素，覆盖整个页面，除了20px的边缘。我尝试this，它在WebKit浏览器和Firefox的作品，不过IE（10）和Opera有问题，这种:-(。不知道如何解决这个问题？元素必须覆盖整个页面，除了20px的余量

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; 
}

来源

2013-07-03 Matěj Pokorný

display：table属性没有被IE正确支持，因此不鼓励使用。注意：“inline-table”，“table”，“table-caption”，“table-cell”，“table-column”，“table-column-group”，“table-row”，“table-row -group“和”inherit“在IE7及更早版本中不受支持。 IE8需要！DOCTYPE。 IE9支持这些值。 –

尝试这样一个解决方案：在身体

http://jsfiddle.net/cyHmD/

决不使用position:absolute和display:table - 离开这些特性，因为它们是因为身体是你的基地从你建立网站的其他部分 - 最多使用位置：相对于身体标记。 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-03 09:54:39 easwee

Opera中有点bug，但如果我不应该使用'display：table'，可能是最好的解决方案。谢谢 ;-）！ –

@MatějPokorný歌剧中的错误是什么？我们也可以解决这个问题。尽管我不会对戏剧感兴趣 - 使用率很低，他们很快就会放弃他们的Presto引擎来开启webkit。 – easwee

歌剧仅响应于水平尺寸调整（[1]（https://qr9fkg.blu.livefilestore.com/y2plH3y4yUyMA9qeiuileypltr3DyLVJBct22Xqk0gSLzSrxjL2eR0jinJBi54_Ph2Wk8YvbFjmjl2hsULobloDmruvvKR2y-31RDzli00LRGK3GAj-CM5MOV9VKhpFzO0f/opera1.jpg），[2]（https://qr9fkg.blu.livefilestore.com /y2pbepS43yjk7nJh58lY9Iu9wVAHRakmYicn0fSWvlYX2FjbPwHmskNy6YTBEtZhR-bOap7yoh4fweut56oLmlUIitJIkmmk0fYN_BI7O0AEyGwMQwN7bu0fKf6BhxkcPVI/opera2.jpg））。但是不要紧 ;-） –

我建议：

#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-03 09:49:08

这将在IE8和IE7中出现问题，因为它们在渲染这种技术时没有指定宽度。另外IE7不支持'table-cell'。 – easwee

this怎么样？只需用边境更换所需保证金为：

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

来源

2013-07-03 09:51:47 mishik

元素必须覆盖整个页面，除了20px的余量

回答

相关问题