CSS Basic Layout - 3 divs + 1 div внутри другого, в центре

Question

У меня проблема, что я просто не могу опустить голову. Я хочу три разных divs, заполняя всю страницу (без полос прокрутки) и средний div с другим div, центрированным по горизонтали и вертикали внутри. Я так много пробовал, но что-то всегда разрушает макет.

До сих пор это мой код:

html, body { 
background-image: url(images/bg_tile.gif); 
background-repeat: repeat; 
margin: 0; 
padding: 0; 
resize:none; 
width: 100%; 
height: 100%; 
} 

#header { 
width: 100%; 
height: 14%; 
background-color: #09F; 
top: 0px; 
} 

#body_con { 
width: 100%; 
height: 80%; 
background-color: #0CF; 
} 

#footer { 
width: 100%; 
height: 6%; 
background-color: #09F; 
bottom: 0px; 
} 

#body_image { 
width: 90%; 
height: 90%; 
margin:0px auto; 
background-color: white; 
} 

Я знаю, как-то это возможно, но я просто не могу заставить его работать. Любые идеи?

EDIT: http://jsfiddle.net/w774g/

Спасибо, Лео

Answer 1

Вы можете установить положение краев абсолютно позиционированного DIV, как это:

http://jsfiddle.net/w774g/1/

#header { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    bottom: 86%; 
    background-color: #09F; 
} 

#body_con { 
    position: absolute; 
    width: 100%; 
    top: 14%; 
    bottom: 6%; 
    background-color: #0CF; 
} 

#footer { 
    position: absolute; 
    width: 100%; 
    top: 94%; 
    bottom: 0; 
    background-color: #09F; 
} 

#body_image { 
    position: absolute; 
    top: 5%; 
    bottom: 5%; 
    left: 5%; 
    right: 5%; 
    background: black; 
} 

Answer 2

Попробуйте это:

#body_con { 
    width: 100%; 
    height: 80%; 
    background-color: #0CF; 
    /* added */ 
    position: relative; 
} 
#body_image { 
    width: 90%; 
    height: 90%; 
    margin:0px auto; 
    background-color: white; 
    /* added */ 
    position: absolute; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    top: 50%; 
    left: 50%; 
} 

Working Fiddle