Question

我有一个40px保证金的“身体”。

此外，我想添加一个100％高度和100％重量的div与'静态位置'。

我的问题是我的'div'超越了'身体'！我希望我的div填充'body'（尊重它的边缘：40px）。

我该如何解决这个问题？

Thks

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

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

Answer 1

如果使用绝对定位，则只需设置div的坐标。

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

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

Answer 2

如果选择带box-sizing的盒子模型，则可以将问题转为无。

首先触发方框模型：box-sizing:border-box; http://www.w3.org/TR/css3-ui/#box-sizing0 / http://quirksmode.org/css/user-interface/boxsizing.html

然后在html中将body的边距转换为padding。如果您选择：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

Answer 3

小提琴：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;
}

一个div 100％的身体与边缘

3 个答案: