Skip to main content
Fonte Link

Altura 100% no conteudo

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!