一个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％的身体与利润

回答

相关问题