元素必須覆蓋整個頁面，除了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的餘量

回答

相關問題