1

Olá, estou com um problema de altura segue o código o mundo abaixo para melhor entendimento:

HTML:

<html>
<body>
    <div class='wrapper'>
            <div class='cabecalho'></div>
            <div class='conteudo'>
                Conteúdo
        </div>
            <div class='clear'></div>
            <div class='rodape'></div>
    </div>
</body>

CSS

html,body{
   height:100%;
}
body{
   background:lightgray;
}
.wrapper{
   height:auto;
   width:100%;
   min-height:100%;
   position:relative;
   overflow:hidden;
}
.cabecalho{
   height:50px;
   background:orange;
   width:100%;
}
.conteudo{
   padding-bottom:100px;
}
.clear{
   clear:both;
}
.rodape{
   width:100%;
   position:absolute;
   bottom:0;
   height:40px;
   background:green;
}

Fiddle em exemplo: http://jsfiddle.net/Lnr2ftyc/1/

Com esse código o rodapé fica no final da página se tiver pouco conteúdo, e também se tiver muito conteúdo.

O problema é que agora estou usando um framework que está injetando no .conteudo uma <div style='height:100%'></div> e em todos os seus pais(wrapper,body,html) está colocando no style height:100%.

1 – Então há a necessidade do .conteúdo sempre tiver a altura 100%(menos a parte do rodapé) independente do texto que tem dentro.

Como é: http://i.imgur.com/Zohn0Gm.png Como deveria ser: http://i.imgur.com/ecrKFJ3.png

2 – Caso tiver muito texto/imagem e ultrapasse o tamanho da janela o rodapé deverá ir para o final da página(como está atualmente).

inserir a descrição da imagem aqui

3 – Também tem um menu que não coloquei mas ele abre do lado do conteúdo e deveria ter a mesma altura do conteúdo.

4 – Tudo deve ser compatível com IE8+ (então flexbox,height:calc não podem ser utilizados).

Obrigado por quem ajudar!

2
  • Coloca o rodapé fora do wrapper e utilize uma técnica chamada Sticky Footer. Basta jogar no Google. Isso pode te ajudar.
    – dsantoro
    Commented 27/05/2015 às 19:30
  • Com a técnica Sticky Footer não resolve,pois quando a div é inserido pelo framework o footer fica encima do conteúdo.O que não é o desejado. Commented 27/05/2015 às 20:42

1 Resposta 1

1

O problema é que você esta usando 2 propriedades referente ao heightna sua div wrapper. Removendo a propriedade min-height:100%;e adicionando height:100%ao seu conteúdo, tudo funciona certinho.

Aqui tem um exemplo do código funcionando: http://jsfiddle.net/rnbp2vrc/

Espero ter ajudado.

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 .