Ir para conteúdo

POWERED BY:

Arquivado

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

zerbait

Div não aumenta com conteúdo.

Por , em Desenvolvimento frontend

Recommended Posts

zerbait    0

zerbait
Postado

Olá galera! sou novo neste foro porém ja consegui achar varias soluções aqui, então vai minha seguinte dúvida.(SEI QUE TEM UM TOPICO COM A MESMA PERGUNTA PORÉM DE 2013, E NÃO FUNCIONOU PRA MIM).

 

Eu uso html5 e css3, então estava indo tudo ok, até me deparar com o conteúdo crescendo, mas a sobrepassava a borda do corpo, e com isso, era sobreexposto pela tag do footer.

 

HTML

<body>
<div id="corpo">
  <header id="cabecalho">

  </header>
  <nav id="menu-top">

  </nav>
  <section id="principal">

	<article>
		
  	</article>


  </section>

 <aside id="menu-direito">

  </aside>


  <footer id="rodape">
	
  </footer>
</div>
</body>
</html>

CSS

div#corpo {
	position: relative;
	width: 1200Px;
	min-height: 900px;
	margin: auto;
	margin-top: -8;
	border: 2px solid black;
	border-radius: 5px;
	background-color: #80e6ff;

}
header#cabecalho {
	width: 1200px;
	height: 130px;
	border-bottom: 2px solid black;
	background-color: #3366ff;
	margin-top: -20;
}
nav#menu-top {
	display: block;
	width: 1200px;
	height: 30px;
	border-bottom: 2px solid black;
	background-color: red;
	margin-top: -16px;
	margin-left: 0;
}
section#principal {
	height: auto;
	position: relative;
	display: block;
	float: left;
	width: 880px;
	border-radius: 5px;
	margin-top: 10px;
	
}
aside#menu-direito {
	display: block;
	float: right;
	margin-right: ;
	margin-top: 10px;
	width: 300px;
}
footer#rodape {
	position: absolute;
	clear: both;
	width: 1200px;
	height: 50px;
	border-top: 2px solid black;
	background-color: #3366ff;
	bottom: 0;
}

Ja tentei com "height=auto" como no outro topico, porém não resolveu, ja que a cor do fundo desaparece e o rodapé fica colado no cabeçalho.

 

Espero que possam me ajudar :rolleyes:

Compartilhar este post

Link para o post
Compartilhar em outros sites

zerbait    0

zerbait
Postado

Adiciona overflow: hidden; na div#corpo e testa aí.

 

Funcionou ^^

valeu, eu quebrei a cabeça por horas, e até deixei de lado 1 semana pra depois tentar de novo, tu e o cara :natallaugh:

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