Hello, I'm having a height problem follow the code the world below for better understanding:
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 in example: link
With this code the footer is at the bottom of the page if you have very little content, and also if you have a lot of content.
The problem is that I am now using a framework that is injecting into the .content a <div style='height:100%'></div> and in all its parents (wrapper, body, html) is putting in style height: 100%.
1 - Then there is the need for the .content to always have the height 100% (minus the footer part) regardless of the text inside.
How it works:
Howitshouldbe:
2 - If you have a lot of text / image and it exceeds the size of the window the footer should go to the bottom of the page (as it is currently).
3 - Also has a menu that I did not put in but it opens on the content side and should have the same height as the content.
4 - Everything should be compatible with IE8 + (so flexbox, height: calc can not be used).
Thanks for the help!