How to make a footer completely fixed in html page

Navigation
0

Hello, I'm trying to put a footer on my html page, I was able to adjust the image automatically at the bottom of the window, the problem is that when I use the scroll and the page does not update the footer does not update, it is "floating above "it only refreshes when I change the height of the browser window if anyone help me thank you very much

Code progress 

  <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 rod can be the chrome browser download bar

Anotherexampleandtherodapeofthissite"Netvasco" link

    
asked by anonymous 02.09.2016 / 15:46

1 answer

0

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>
    
02.09.2016 / 16:23
How to create a field dynamically in Ionic and / or Angular Js? Select2 options appear when selecting a