A div 100% in body with margins

Question

I have a 'body' with 40px of margin.

Moreover, I want to add a div with 100% in height and 100% in weight with the 'static position'.

My problem is that my 'div' is go beyond the 'body' ! I want my div fills the 'body' (respecting with the margin of it : 40px).

How can I solve this problem ?

Thks

MY JS FIDDLE

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

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

Answer 1

If you use an absolute positioning you can just set coordinates of the div.

Fiddle: http://jsfiddle.net/EQEPY/

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

Answer 2

if you choose a box-model with box-sizing, you can turn the problem into none.

First trigger the box-model with : box-sizing:border-box; http://www.w3.org/TR/css3-ui/#box-sizing0 / http://quirksmode.org/css/user-interface/boxsizing.html

Then turn the margin of body into padding in html. If you choose : border-box it includes border and padding into the size set in 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

Fiddle: http://jsfiddle.net/sbDSy/2/

Why not apply padding to the div instead of margin to the body:

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

body {
    margin:0;
    padding:0;
}