Footer ultrapassa/ultrapassado pela div conteúdo

UserName · June 3, 2015 at 08:01 AM

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

1º

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.

2º

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?

Edited June 3, 2015 at 08:03 AM by UserName

NelsonBN · June 3, 2015 at 08:43 AM

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

Edited June 3, 2015 at 01:15 PM by apocsantos
geshi

HappyHippyHippo · June 3, 2015 at 08:47 AM

pesquisa na net por sticky footer, existem imensos sites a explicar como implentar

KTachyon · June 3, 2015 at 09:46 AM

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

Sign In

Footer ultrapassa/ultrapassado pela div conteúdo

Recommended Posts

UserName

NelsonBN

HappyHippyHippo

KTachyon

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information