Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tamoura

Footer em cima do conteúdo

Por , em Desenvolvimento frontend

Recommended Posts

tamoura    0

tamoura
Postado

O problema é com o zoom. Quando aumento com o zoom do navegador, o footer vem e fica em cima do conteúdo (ele literalmente "come" o conteúdo).

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title>Teste</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/index.css">
		<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="css/mobile.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>

	<body>
		<div class="geral">
			<header>
			HEADER
			</header>

			<div class="content">
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue erat, ullamcorper pulvinar malesuada ultricies, mollis non magna. Curabitur quis nisi ut ligula ultricies gravida. Suspendisse elit justo, 
                                vulputate in facilisis sed, tristique id nisi. Maecenas risus quam, suscipit eu vehicula ut, ultricies in neque. Donec gravida tristique turpis ut interdum. Donec lacinia nisi id enim lacinia sit amet facilisis est ullamcorper. Curabitur ipsum libero, 
                                sollicitudin nec rhoncus quis, congue non ipsum. Etiam at eros dolor. Mauris non erat vitae leo faucibus fermentum. In consectetur, diam eget faucibus dignissim, urna justo pretium dui, nec eleifend neque velit vitae odio. Nam et tristique turpis. In dictum commodo sem ut dignissim. 
                                In convallis 
                                quam non tortor posuere sed ornare nulla pulvinar. Suspendisse placerat turpis in tortor rutrum nec mollis nulla posuere. 
                                Integer tellus est, rhoncus ut sagittis eget, mattis a velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque gravida posuere orci nec ornare. Donec elit nulla, aliquam eget cursus a, commodo sed odio.
				</p>
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue erat, ullamcorper pulvinar malesuada ultricies, mollis non magna. Curabitur quis nisi ut ligula ultricies gravida. Suspendisse elit justo, 
                                vulputate in facilisis sed, tristique id nisi. Maecenas risus quam, suscipit eu vehicula ut, ultricies in neque. Donec gravida tristique turpis ut interdum. Donec lacinia nisi id enim lacinia sit amet facilisis est ullamcorper. Curabitur ipsum libero, 
                                sollicitudin nec rhoncus quis, congue non ipsum. Etiam at eros dolor. Mauris non erat vitae leo faucibus fermentum. In consectetur, diam eget faucibus dignissim, urna justo pretium dui, nec eleifend neque velit vitae odio. Nam et tristique turpis. In dictum commodo sem ut dignissim. 
                                In convallis 
                                quam non tortor posuere sed ornare nulla pulvinar. Suspendisse placerat turpis in tortor rutrum nec mollis nulla posuere. 
                                Integer tellus est, rhoncus ut sagittis eget, mattis a velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque gravida posuere orci nec ornare. Donec elit nulla, aliquam eget cursus a, commodo sed odio.
				</p>
			</div>
			
			<footer>
			FOOTER
			</footer>

		</div>
	</body>
</html>

html, body {
    	height:100%;
    }
     
    .geral {
    	min-height:100%;
    	height: 100%;
    	overflow: hidden;
    	position:relative;
    	width:100%;
    }

    header{
    	background-color: blue;
    	position:absolute;
	    top:0;
	    width:100%;
    }
     
    footer {
    position:absolute;
    bottom:0;
    width:100%;
    background-color: red;
    }
     
    .content {
    	background-color: yellow;
    	min-height: 650px;
    	height: 100%;
    	padding-bottom: 100px;
    	overflow:hidden;

    }

Compartilhar este post

Link para o post
Compartilhar em outros sites

tamoura    0

tamoura
Postado

provavelmente por causa do "position absolute", que vai ficar em cima do texto quando o zoom for aumentando.

 

O problema é que sou obrigada a usar o "position:absolute" pra deixar o rodapé no fim da página T-T

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

 

O problema é que sou obrigada a usar o "position:absolute" pra deixar o rodapé no fim da página T-T

 

Você tem que deixar o rodapé no final da página, ou no final da janela onde o site está sendo exibido?

 

Se for no final da página, você não precisa de position:absolute no seu CSS. Dê uma margem, ou uma altura mínima para a classe .content, e isso já deve te ajudar:

.content {
  min-height:80vh;
}

Lembrando que este é só um exemplo!

Boa sorte :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gabriel T.    4

Gabriel T.
Postado 
.geral {
  padding-bottom: 100px;
}

footer {
  height: 100px;
  position: absolute:
  bottom: 0;
}

Não deixe seu header como position:absolute amigo, senão a "height" dele irá comer o conteúdo de baixo se o conteúdo não tiver uma padding-top do tamanho da header.

 

Recomendo remover o position:absolute do seu header.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito