Entrar | Registrar | FAQ
Anonymous

Problema com sobreposição de divs

+ Postar uma resposta

2 Mensagens Página 1 de 1


Problema com sobreposição de divs

por jeffsmaia » Ter Jul 19, 2011 6:48 pm

Boa tarde galera, estou com um problema com divs. Quero que a div footer fique no rodapé da página quando o conteúdo da div content não preencher o centro da página, e que a div content empurre a div footer quando o conteudo for maior que o espaço da página, porém, quando o conteúdo é maior, a div content fica por baixo da div footer e esta não se mexe.

Gostaria de saber se existe alguma maneira de fazer isso com css e/ou html.
Segue o código que já fiz.
//as cores das divs são somente pra melhor visualização.
Código: Selecionar tudo
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
*  {
   margin:0;
   padding:0;
}
html, body {height:100%;}
body {
   background-attachment: scroll;
   background-image: url(imagens/bg.jpg);
   background-repeat: repeat-x;
   background-position: center center;
   left: auto;
   right: auto;
}
.geral{
   min-height:100%;
   position:relative;
   text-align: left;
}
.header {
   background-color: #0F0;
   height: 200px;
}
.content{
   margin:0 auto;
   background-color:#33F;
   position:relative;
   width:900px;
   height: auto;
   overflow:hidden;
   z-index:1;
}
.footer{
   background-color:#C3C;
   position: absolute;
   bottom:0;
   width:100%;
   height: 130px;
   z-index:1;
}

</style>
</head>

<body>
<div class="geral">
   <div class="header">O conteúdo de  class "header" é inserido aqui</div>
   <div class="content">O conteúdo de  class "content" é inserido aqui</div>
   <div class="footer">O conteúdo de  class "footer" é inserido aqui</div>
</div>
</body>
</html>

Avatar de usuário

jeffsmaia

  • Mensagens: 1
  • Data de registro: Ter Jul 19, 2011 6:06 pm

Re: Problema com sobreposição de divs

por HTML.net » Qua Jul 20, 2011 7:32 am

Você pode usar min-height para dar a div de conteúdo uma altura mínima:

<div style="min-height:100%;">

- Andreas, HTML.net
Avatar de usuário

HTML.net
Site Admin

  • Mensagens: 1194
  • Data de registro: Sáb Set 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.


+ Postar uma resposta

Página 1 de 1