How to make a fully fixed footer in html page

Question

Good morning, I’m trying to put a footer on my html page, I was able to adjust the image automatically at the base of the window, the problem is that when I use the scroll and I take off the page the footer does not update, it is "floating up" it only updates when I change the height of the browser window If anyone helps me I really appreciate

Progress of the code

  <div style="width:100%">
        
          <img id="topo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8550/29316211801_cbd3bc454f_b.jpg" height="660" width="1349" />
          <img id="baixo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8550/29316211801_cbd3bc454f_b.jpg" height="660" width="1349" />
          <img id="direita" alt="" class="form-image" border="0" src="http://farm9.staticflickr.com/8236/29288098292_342e4d0aec_b.jpg" height="660" width="1349" />

          <img id="topo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8727/28771614534_4b2252e45e_b.jpg" height="660" width="1349" />
          <img id="baixo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8727/28771614534_4b2252e45e_b.jpg" height="660" width="1349" />
          <img id="direita" alt="" class="form-image" border="0" src="http://farm9.staticflickr.com/8313/28774844773_ecd764015a_b.jpg" height="660" width="1349" />


          <img id="topo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8694/29316211641_8d4a6d2af6_b.jpg" height="660" width="1349" />
          <img id="baixo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8694/29316211641_8d4a6d2af6_b.jpg" height="660" width="1349" />
          <img id="direita" alt="" class="form-image" border="0" src="http://farm9.staticflickr.com/8414/29108354480_3fd5c24a27_b.jpg" height="660" width="1349"/>

</div>
<style type="text/css">

#topo{
  z-index : 10;
  top:0;
	position: absolute;
  width:100%;
  height: 80px;

}
#baixo{
  z-index : 10;
	position:absolute;
	bottom:0;
	width:100%;
	height: 80px;
}

#direita{
 z-index : 15;
 float:left;
 width:200px;
 height: 800px;
}








</style>          
     

An example of this footer can be the Chrome browser download bar

Another example is the footer of this site "Netvasco" http://www.vascalindas.com.br/

Answer 1

Leave the div that will be in the footer with fixed position: position:Fixed;

  <div style="width:100%">
        
          <img id="topo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8550/29316211801_cbd3bc454f_b.jpg" height="660" width="1349" />
          <img id="baixo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8550/29316211801_cbd3bc454f_b.jpg" height="660" width="1349" />
          <img id="direita" alt="" class="form-image" border="0" src="http://farm9.staticflickr.com/8236/29288098292_342e4d0aec_b.jpg" height="660" width="1349" />

          <img id="topo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8727/28771614534_4b2252e45e_b.jpg" height="660" width="1349" />
          <img id="baixo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8727/28771614534_4b2252e45e_b.jpg" height="660" width="1349" />
          <img id="direita" alt="" class="form-image" border="0" src="http://farm9.staticflickr.com/8313/28774844773_ecd764015a_b.jpg" height="660" width="1349" />


          <img id="topo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8694/29316211641_8d4a6d2af6_b.jpg" height="660" width="1349" />
          <img id="baixo" alt="" class="form-image" border="0" src="https://farm9.staticflickr.com/8694/29316211641_8d4a6d2af6_b.jpg" height="660" width="1349" />
          <img id="direita" alt="" class="form-image" border="0" src="http://farm9.staticflickr.com/8414/29108354480_3fd5c24a27_b.jpg" height="660" width="1349"/>

</div>

<div id="rodape">
    Conteúdo do Rodapé Fixo
</div>
<style type="text/css">

#rodape { width:100%; line-height:50px; background:#CCC; text-align:center; position:fixed; left:0; bottom:0; z-index:99; }

#topo{
  z-index : 10;
  top:0;
	position: absolute;
  width:100%;
  height: 80px;

}
#baixo{
  z-index : 10;
	position:absolute;
	bottom:0;
	width:100%;
	height: 80px;
}

#direita{
 z-index : 15;
 float:left;
 width:200px;
 height: 800px;
}








</style>