HTML Manter div no rodapé da página

[Fernando Cardoso de Melo]

Olá. Estou montando um pequeno site e estou com dificuldade para ajustar uma div sempre no rodapé da página. Quando redimensiono a janela na vertical, a div fica no rodapé mas vai subindo em direção a uma imagem acima que está em porcentagem para ser responsiva na vertical. Quando a div que tem um texto chega na foto, o texto passa por cima da foto. O que quero fazer é que quando o texto chegar na foto apareça a barra de rolagem. Alguma dica para quem tem pouquissima experiência?

Segue exemplo em http://compositorjoelschultzbatista.com/teste.html

 

Obrigado

[Matheus Rodrigues]

O link ajuda? 

 

 

https://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

[Marcelo Calazans]

@Fernando Cardoso de Melo

Olá colega.

 

Você disse: (citação abaixo)

Citação

Quando redimensiono a janela na vertical, a div fica no rodapé mas vai subindo em direção a uma imagem

 

O seu problema na verdade não é o fato da <div> estar subindo.

 

A sua <div> é esta abaixo:

 

<div style="position: absolute; width: 100%; bottom: 30px; left: 0; z-index: 1" id="camada1" align="center">
&nbsp;
<p><font color="#FFFFFF"><span style="font-size: 22pt">"Nós, porém, segundo a sua promessa, esperamos novos céus e nova terra, nos quais habita justiça." 1 João 3:13</span></font></p>
<p>&nbsp;</p>
<p><font color="#FFFFFF"><span style="font-size: 22pt">"...porque todo o que é nascido de Deus vence o mundo; e esta é a vitória que vence o mundo: a nossa fé." 1 João 5:4</span></font></p>
</div>

 

Perceba que com a tela cheia (grande), a <div> está fixada no bottom: 30px;

 

 

Percebe agora, que com a tela mais reduzida (redimensionada na vertical como você disse), a <div> continua na mesma posição bottom: 30px;

 

 

 

Com isso, note que o seu problema não é o fato da <div> estar subindo, pois ela não está.

 

Eu creio que o seu modelo precisa de uma restruturação geral melhor para funcionar como você está querendo.

 

Abraços e espero que ajude em algo.

[Fernando Cardoso de Melo]

17 horas atrás, Matheus Rodrigues disse:

O link ajuda? 

 

 

https://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

Olá. Eu já tinha visto esse tutorial mas perceba que o exemplo do tutorial não tem imagem. É texto e o mesmo não é responsivo na vertical.

No meu caso deve ser algum comando que ta faltando ou incorreto.

1 hora atrás, Marcelo Calazans disse:

@Fernando Cardoso de Melo

Olá colega.

 

Você disse: (citação abaixo)

 

O seu problema na verdade não é o fato da <div> estar subindo.

 

A sua <div> é esta abaixo:

 

<div style="position: absolute; width: 100%; bottom: 30px; left: 0; z-index: 1" id="camada1" align="center">
&nbsp;
<p><font color="#FFFFFF"><span style="font-size: 22pt">"Nós, porém, segundo a sua promessa, esperamos novos céus e nova terra, nos quais habita justiça." 1 João 3:13</span></font></p>
<p>&nbsp;</p>
<p><font color="#FFFFFF"><span style="font-size: 22pt">"...porque todo o que é nascido de Deus vence o mundo; e esta é a vitória que vence o mundo: a nossa fé." 1 João 5:4</span></font></p>
</div>

 

Perceba que com a tela cheia (grande), a <div> está fixada no bottom: 30px;

 

 

Percebe agora, que com a tela mais reduzida (redimensionada na vertical como você disse), a <div> continua na mesma posição bottom: 30px;

 

 

 

Com isso, note que o seu problema não é o fato da <div> estar subindo, pois ela não está.

 

Eu creio que o seu modelo precisa de uma restruturação geral melhor para funcionar como você está querendo.

 

Abraços e espero que ajude em algo.

Quando falo que a div está subindo quero dizer que ela se aproxima da imagem, sendo que a imagem está em porcentagem na altura. Só preciso que quando a div com o texto toque na base da imagem, entre a barra de rolagem sem que o texto cubra a imagem.

[Marcelo Calazans]

44 minutos atrás, Fernando Cardoso de Melo disse:

Quando falo que a div está subindo quero dizer que ela se aproxima da imagem, sendo que a imagem está em porcentagem na altura. Só preciso que quando a div com o texto toque na base da imagem, entre a barra de rolagem sem que o texto cubra a imagem.

 

Imaginei que era isso que você queria, e por isso eu recomendei que houvesse uma reestruturação geral do modelo.

 

Primeiro, essa foto não é responsiva, você está alterando-a na largura (width), e a altura (height) está permanecendo a mesma. Com isso você está achatando e deformando a imagem apenas.

 

Quando a tela do navegador for redimensionada, simulando uma área menor (mobile), a imagem não pode distorcer, e a medida que a largura muda, a altura deve mudar também.

 

Veja o exemplo abaixo que você vai entender:

 

https://www.w3schools.com/howto/howto_css_image_responsive.asp

 

Depois disso, uma parte do seu problema se resolve, pois, a medida que a largura da tela do navegador diminui, a altura na imagem vai diminuir também, e ficar menos próxima da sua <div> do rodapé.

 

Mas não é só isso.

 

O texto na <div> do rodapé, pode diminuir à medida que a tela é redimensionada e fica menor (tente mudar o margin da tag <p> ou o tamanho da fonte se necessário). Para isso, você precisa melhorar seus conceitos de site responsivo, inserindo no modelo conceitos de Media Query, que está no exemplo abaixo:

 

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

 

Com isso tudo, o seu modelo já deve melhorar um pouco.

 

Foi por isso que eu disse que a solução é uma restruturação geral melhor.

 

Abraços.