0

Bom dia, eu estou tentando colocar um rodapé na minha página html, eu consegui ajustar a imagem automaticamente na base da janela, o problema é que quando eu uso o scroll e desco a página o rodapé não atualiza, ele fica "flutuando acima" ele somente atualiza quando eu altero a altura da janela do navegador se alguém me ajudar agradeço muito

Andamento do codigo

  <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>          
     

Um exemplo deste rodape pode ser a barra de downloads do navegador chrome inserir a descrição da imagem aqui

Outro exemplo e o rodape deste site "Netvasco" http://www.vascalindas.com.br/

1 Resposta 1

0

Deixa a div que ficará no rodapé com posição fixa: 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>          
     

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .