Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Fundo 100%


Fernando_Ramos

Pergunta

Amigos,

Boa tarde.

estou tentando fazer um layout em CSS e DIVs e estou encontrando alguns problemas.

Como teste simulei que o layout do meu site fosse ficar bem grande em altura, portando divido o mesmo em 3 partes.

  • Topo
  • Corpo
  • Rodape

e o CSS coloquei da seguinte forma:

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
body {
    height: 100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color: #CDDBF3;
    font-size:9px;
    margin: 0px 0px 0px 0px;
    text-align:center;    
}
html {
    height: 100%;
}
#SITE {
    width: 770px;
    height: 100%;
    background:url(../img/barras/fundo.gif) repeat-y center;
    text-align: center;
}
#TOPO {
    width: 750px;
    height: 225px;
    background-color:red;
}
#CORPO {
    width: 750px;
    height: 900px;
    background-color:blue;
}
#RODAPE {
    width: 750px;
    height: 80px;
    background-color:yellow;
}
e no HTML coloquei assim:
<body>


    <div id="SITE">
        <div id="TOPO">        </div>
        <div id="CORPO">        </div>
        <div id="RODAPE">        </div>
    </div>


</body>

o que esta acontecendo é que o 100% definido da altura esta marcando apenas o espaço inicial utilizado pelo navegador, ou seja, se a resolução for 800x600 ao carragar o site o fundo preenche toda a tela, mas quando rolo a barra de rolagem o fundo não acompanha é cortado.

segue o link de exemplo

VEJA AQUI O EXEMPLO!

abraços!

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...