я ни въеду как с ним поступить, я знаю что это возможно, но вот ни в какую не получается:

* { 
   margin: 0; 
   padding: 0; 
   width: 100%; 
   height: 100%; 
}
.wrapper {
     margin: 0 auto;
     width: 100%;
     background-color: #444555;
}
 
.header { 
 text-align: center; 
 margin: 0 auto; 
 width: 80%; 
 height: 5%; 
 color: white; 
 background-color: darkBlue; 
 }
 .content {
     width: 100%;
     background-color: #FFBBAA;
 }
 
 .container {
      margin: 0 auto;
      border: 1px solid #00008B;
      width: 80%;
      background-color: #FFBBAA;
 }
 
 .footer {
     position: relative; 
     margin: 0 auto;
     width: 80%;
     height: 10%;
     clear: both;
     border: 1px solid yellow;
     background-color: lightblue;
     text-align: center;
 }

<div class='wrapper'>
<div class="header">LOGO my Site.php</div>
      <div class="container">
 
        </div>
 
        <div class="footer">World © TM</div>
 
    </div>

должно стандартно получится снизу, чтобы было без белых полей при ресайзе?

p.s. шаблон на jsfiddle