Footer

Without using background image: Short page Long page
Using background image: Short page Long page
Fixed positioning: Short page Long page

Source

Without using background image

* { margin:0; padding:0; border:none; }
html { background-color:Aqua; height: 100%; }
body { background-color:Blue; height: 100%; }
#formMain { height: 100%; background-color: Green; }
#container { min-height: 100%; position:relative; margin-right: auto; margin-left: auto; background-color: White; }
#footerFake { background-color:Silver; height:50px;	}
#header { background-color: Teal; }
#body { background-color: Orange; }
#footer { background-color:Olive; position:relative; height:50px; margin-top: -50px; }

<body>
  <form id="formMain" runat="server"> 
    <div id="container">          
      <div id="header">header</div>    
      <div id="body">body</div>    
      <div id="footerFake">fake footer</div>      
    </div>    
    <div id="footer">footer</div>
  </form>    
</body>

Using background image

* { margin: 0; padding: 0; border: none; }
html { background-color: Aqua; height: 100%; }
body { background-color: Blue; height: 100%; }
#formMain { height: 100%; background-color: Green; }
#container { min-height: 100%; position: relative; margin-right: auto; margin-left: auto; background-color: White; 
background-image: url(img/image.jpg); background-repeat: no-repeat; background-position: right bottom; }
#footerFake { background-color: Silver; height: 50px; }
#header { background-color: Teal; }
#body { background-color: Orange; }
#footer { background-color: Olive; position: relative; height: 50px; margin-top: -50px; }

<body>
  <form id="formMain" runat="server"> 
    <div id="container">          
      <div id="header">header</div>    
      <div id="body">body</div>    
      <div id="footerFake">fake footer</div>      
    </div>    
    <div id="footer">footer</div>
  </form>    
</body>

Fixed positioning

BODY { height: 100% } /* Required for percentage heights below */
#header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; background-color: Aqua; }
#sidebar { position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 100px; left: 0; background-color: Gray; }
#main { position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 100px; left: 10em;  overflow:auto; }
#footer { position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; background-color: Olive; }

<body>
    <form id="form1" runat="server">
    <div>              
      <div id="header">header</div>
      <div id="sidebar">sidebar</div>
      <div id="main">main</div>
      <div id="footer">footer</div>    
    </div>
    </form>
</body>