一個100％的身體與利潤

此外，我想用「靜態位置」添加一個高度爲100％，重量爲100％的div。

我的問題是，我的'div'超越了'body'！我想我的div填充'body'（尊重它的邊距：40px）。

我該如何解決這個問題？

THKS

body { 
    background:pink; 
    margin:40px; 
    } 

.contenuWorks { 
    height:100%; 
    width: 100% ; 
    background:red; 
    position:absolute; 
    }

來源

2014-02-16 Bonjour

嗯......你能不能解釋的問題多一點？如果我看JS小提琴，它看起來就像你試圖達到的東西。 – berentrom

div的背景不觸及身體的邊緣對你來說很重要嗎？ – Phrogz

@EmeryFramboise我認爲@Bonjour想要在'.countenuWorks' div中包含一個40px的粉色邊框。不只是在頂部和左側。 –

如果你使用絕對定位，你可以設置div的座標。

小提琴：http://jsfiddle.net/EQEPY/

.contenuWorks { 
    left: 40px; 
    right: 40px; 
    top: 40px; 
    bottom: 40px; 
    background:red; 
    position:absolute; 
}

來源

2014-02-16 20:19:34

-1

小提琴：http://jsfiddle.net/sbDSy/2/

爲什麼不適用padding到div而不是margin到body：

.contenuWorks { 
    height:100%; 
    width: 100% ; 
    padding:40px; 
    background:red; 
    position:absolute; 
} 

body { 
    margin:0; 
    padding:0; 
}

來源

2014-02-16 20:01:43

因爲這不適用於內容框模型。 http://jsfiddle.net/sbDSy/3/你做得太寬了。儘管如此，拋出「填充框」模型並且你有一個勝利者。假設OP在填充頁面的背景下正常工作。 – Phrogz

使用'box-sizing'如何？ –

如果你選擇一個盒子模型box-sizing，你可以把問題轉化爲無。

第一觸發盒模型：box-sizing:border-box;http://www.w3.org/TR/css3-ui/#box-sizing0/http://quirksmode.org/css/user-interface/boxsizing.html

然後轉動體的邊緣到填充在HTML中。如果您選擇：border-box它包含邊框和填充爲CSS中設置的大小。

<div> 
    box-sizing and use 
    <code>height: 100%; width : 100%;</code> 
    without headhakes. 
</div>

html, body, div { 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    height:100%; 
    width:100%; 
    border:solid; 
    margin:0; 
} 
html { 
    padding:40px; 
    border:solid red; 
} 
body { 
    border:solid blue; 
} 
div{ 
    border:solid yellow; 
    background:pink; 
}

http://codepen.io/gc-nomade/pen/Fjqzn

來源

2014-02-16 22:00:56

一個100％的身體與利潤

回答

相關問題