1

Estou tendo problemas pra criar um rodapé que fique sempre no final na página, pois o texto da div conteúdo está ficando por baixo do rodapé. Já tentei várias coisas, o código está assim:

<div class="tudo">
<div class="header">
</div>

<div class="conteudo">
</div>

<div class="rodape">
</div>

</div>

CSS:

html, body {
    margin: 0;
    height: 100%;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 10pt;
    color:#2B2B2B;
    background-color:#F1F1F1;   }

#tudo {
min-height: 100%;
position: relative; }

* html #tudo {
height: 100%; }

#header {
    background-color:#5B5B5B;
    height:100px; }

#conteudo {
margin: 0 auto;
padding-bottom: 300px; }

#rodape {
    color: white;
    background-color:#1E1E1E;
    padding: 5em 0 2em 0;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 200px;
    width: 100%; }
2
  • para fazer o rodapé use a tag do priprio html5 o <footer></footer> e em seu css use clear: both, veja se resolve.
    – RFL
    8/10/2015 às 14:01
  • @RafaelAcioly já estava usando o clear: both. Usar a tag não resolveu.
    – Geralt
    8/10/2015 às 14:11

3 Respostas 3

1

Neste layout a única coisa capaz de causar isto, talvez seja o facto de estares a definir os atributos como class (.) e depois tentar formatar como id (#).

Aplicando uma correção na estrutura, onde deves mudar de class para id o problema desaparece.

<div id="tudo">
<div id="header">
</div>

<div id="conteudo">
</div>

<div id="rodape">
</div>

</div>

Em vez de estares a escrever div com camadas contendo outras div, não é mal até, o navegador vai interpretar isso normalmente, mas para quem está a escrever a estrutura perder-se nessa repetição de tags torna-se um confuso às vezes e irritante. Há várias formas de melhorar essa estrutura sem muito esforço, usando os elementos semânticos do HTML5 torna-se mais fácil de ler e identificar partes.

Deixo este pequeno exemplo de como poderias deixar alguns elementos mais semânticos.

header, footer {
			display:block;
		}
		html, body, div, h1, h2, h3 {
			margin: 0;
			padding: 0;
		}
		html { background: #0f0f0f; }
		body {
			width: 700px;
			margin: 0 auto 2em;
		}
		header {
			background: rgb(76, 67, 65);
			height: 96px;
			padding: 32px 0 0 2%;
		}
		
		#conteudo { background: #fff; padding: 32px 2% 0 2%; }
		
		footer {
			background: rgb(100, 98, 102);
			height: 50px;
			
			padding: 32px 0 0 2%;
			clear: both;
		}
<!doctype html>
<html>
	<head>
		<title>Another Fixed Layout</title>
	</head>
	<body>
		<header><h1>Another Fixed Layout</h1></header>
		
		<div id="conteudo">
		
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero quis libero suscipit dignissim sit amet eu velit. Morbi libero purus, vulputate vitae turpis ut, dictum condimentum magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum suscipit elementum. Integer ante mi, rutrum vitae egestas id, condimentum mattis orci. Sed id hendrerit justo. Nullam congue sit amet nibh id imperdiet. Vivamus vitae nibh vel eros blandit mattis eget eu elit. Aenean gravida enim vel dolor faucibus, fermentum sodales augue porta. <br/><br/>
		Aliquam id laoreet nulla. Etiam ut porta sapien, eget ultrices orci. Sed suscipit nisi turpis, a molestie velit hendrerit sit amet. Phasellus tortor ligula, sodales cursus sapien vitae, porttitor dapibus justo. Donec sagittis et lorem eget blandit. Praesent tristique finibus erat, vitae posuere nisi sagittis sed. Etiam tincidunt eu mi quis mollis. Pellentesque mattis dolor risus, vel ornare leo ultricies ut. Suspendisse consequat libero quis lacus dapibus, tristique sollicitudin justo sodales. Duis blandit lacus sit amet nisl ultrices varius. Morbi porttitor, nisi faucibus iaculis accumsan, diam dui sodales est, sit amet tempor diam mauris quis nisl. Aliquam nec convallis leo. Pellentesque lobortis, metus vel blandit iaculis, ante purus sodales elit, quis laoreet lorem augue molestie nunc. Suspendisse sagittis urna eu nisl ornare dignissim. Ut porttitor velit neque, vitae condimentum ligula aliquam a. <br/><br/>
		Duis sagittis placerat ipsum, a pharetra turpis tincidunt sed. Nulla placerat venenatis justo sed tempus. Nunc congue justo eget luctus pharetra. Donec maximus velit lectus, quis eleifend libero interdum vitae. In faucibus vehicula dui, quis lobortis turpis condimentum sed. Phasellus condimentum elementum nunc ut aliquet. In sem ante, venenatis id viverra non, facilisis ut nulla. Donec ac lacinia tortor. Vivamus finibus mollis mauris. Aenean at eros ornare, hendrerit lorem et, bibendum tellus. Ut vel tortor placerat, dignissim nunc in, accumsan dui. Sed ac diam nec elit feugiat tristique. Cras non feugiat dui. In quis mollis diam, nec blandit neque. <br/><br/>
		Curabitur tincidunt sed est vitae pretium. Duis at arcu finibus, ornare turpis nec, commodo dolor. Pellentesque elit diam, ullamcorper et pulvinar id, pharetra in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis semper odio ut porta. Donec a vulputate justo, vitae finibus nulla. Donec nibh risus, commodo ac euismod et, sollicitudin quis erat.<br/><br/>
		Nam vitae elit leo. Proin pretium, turpis rutrum posuere commodo, mauris sapien sodales nunc, at eleifend nunc lectus ut justo. Donec dui neque, hendrerit ut fermentum blandit, sagittis non nisi. Nulla nisi odio, sodales nec hendrerit in, aliquam at ligula. Pellentesque aliquam rhoncus hendrerit. Fusce venenatis ultrices dolor. Praesent ante ex, auctor in fringilla auctor, malesuada vitae mi. Nam dictum elementum iaculis. Nam rhoncus enim sit amet mauris finibus ullamcorper non quis neque. Cras felis nisl, porta ac molestie ut, venenatis et turpis. Phasellus eget convallis dolor, in ultricies sapien. Sed porttitor tortor ut rhoncus tempor. Donec id molestie enim, in consectetur nisl. Donec vel est id nunc euismod ornare in pulvinar ipsum. Integer volutpat elementum neque, id suscipit tortor scelerisque in. <br/><br/>
			
			
		</div>
		
		<footer>Copyright &copy; 20XX -</footer>
	</body>
</html>

0
#conteudo {
   margin: 0 auto;
   height:100%; //Está faltando esta linha no conteúdo
   padding-bottom: 300px; }
1
  • Adicionei aqui e nada mudou :/
    – Geralt
    8/10/2015 às 14:30
0

Geralmente eu defino 100% para as divs wrappers quando já se tem um pai definindo o wrap do site como o seu <div class="tudo'>, então faça o seguinte:

.header, .conteudo, .rodape{
   float:left;
   width:100%
}
3
  • O rodapé ficou fixado no fim da página como eu queria, mas o conteúdo continua sendo cortado e ficando por baixo do rodapé.
    – Geralt
    8/10/2015 às 14:35
  • add isso display:block; 8/10/2015 às 14:53
  • Nenhuma mudança também. Eu adicionei padding-bottom à div tudo, o que até melhorou a situação. O problema é que se der zoom+ na página o rodapé volta a ficar por cima.
    – Geralt
    8/10/2015 às 15:06

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 .