1
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: http://jsfiddle.net/Lnr2ftyc/1/
With this code the footer is at the bottom of the page if it has little content, and also if it has a lot of content.
The problem is that I am now using a framework that is injecting into . content a <div style='height:100%'></div> and all your parents(wrapper,body,html) are putting in the height:100 style%.
1 - Then there is the need of . content always has the height 100%(minus the part of the footer) independent of the text that has inside.
How is it:
As it should be:
2 - If you have too much text/image and exceed 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 but it opens on the content side and should be the same height of the content.
4 - Everything must be IE8+ compatible (so flexbox,height:Calc cannot be used).
Thanks for the help!
Put the footer out of the wrapper and use a technique called Sticky Footer. Just play on Google. This can help you.
– dsantoro
With the Sticky Footer technique does not solve, because when the div is inserted by the framework the footer is on top of the content. What is not the desired.
– Marcos Schneider