Ir para o conteúdo
UserName

Footer ultrapassa/ultrapassado pela div conteúdo

Mensagens Recomendadas

UserName

Estou a criar a minha pagina pessoal e deparei-me com 2 problemas envolvendo o footer

se utilizar position absolute e o conteudo tiver pouco texto o footer fica no fundo, mas se o conteúdo tiver muito texto, a div conteúdo ultrapassa o footer

se não utilizar o position absolute e o conteudo tiver pouco texto o footer já não fica no fundo e vem para cima imediatamente abaixo a div do conteudo.

quero que o wrapper do conteudo ocupe 100% da altura de maneira a que o footer fique sempre no fundo quer haja muito ou pouco texto na div conteudo

como alcanço isto?

podem ver aqui o codigo da estrutura da pagina

https://jsfiddle.net/9Lo1uame/1/

menu em cima

uma div wrapper, de largura definida e ao centro, com 3 divs dentro dela(

+ div do submenu em cima

+ div dos links do submenu à esquerda

+ div do conteudo à direita)

footer em baixo

pelo que vi na internet, não se deve utilizar o position absolute no footer, e uma maneira de resolver através de margens negativas com o tamanho do footer mas não vejo maneira implementar.

alguem me ajuda?

Editado por UserName

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
NelsonBN

esta é uma solução....

<!DOCTYPE html>
<html lang="en">
<head>
 <style type="text/css">
	 html, body {
		 margin: 0;
		 padding: 0;
		 height: 100%;
	 }
	 #wrapper {
		 min-height: 100%;
		 background-color: red;
	 }
	 #header {
		 background-color: pink;
		 height: 250px;
	 }
	 #main {
		 padding-bottom: 150px;
	 }
	 #footer {
		 position: relative;
		 margin-top: -150px;
		 height: 150px;
		 background-color: yellow;
	 }
 </style>
</head>
<body>
 <div id="wrapper">
	 <div id="header">
		 header
	 </div>
	 <div id="main">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
<p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
		 <p>Lorem ipsum</p>
	 </div>
 </div>
 <div id="footer">
	 footer
 </div>
</body>
</html>

outra será usares javascript

Editado por apocsantos
geshi

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
KTachyon

Cria uma div relativa com a mesma altura do footer que vai ficar por debaixo do footer a cobrir esse espaço.


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.