How to make a inner div 100% height with sticky footer?
I have this page (http://www.alsite.com.br/angelogarcia/angelogarcia.html)
that has a Sticky Footer (http://www.cssstickyfooter.com/).
So I need the div #main is 100% height minus the size of the footer(70px),
and my div .conteudo is the same size of the div #main, 100% height too.
I've set colours to be easy to see what happens
I'm clear?
The structure is:
<body>
<div id="wrap">
<div class="main">
<div class="sidebar"></div>
<div class="conteudo"></div>
</div>
</div>
<div id="footer"></div>
</body>
my CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
width:100%;
min-width: 960px;
margin: 0 auto;
background: #FFCC00;
padding-bottom: 70px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -70px; /* negative value of footer height */
height: 70px;
clear:both;
}
.conteudo{
padding:0 15px;
width:60%;
margin-left: 30px;
background: #000000;
background:rgba(255,0,0,0.8);
text-align: justify;
font-size: 16px;
letter-spacing: 0.8px;
}
No comments:
Post a Comment