I'm trying to create a very simple page that contains a container, a header, a left column and a footer:
<containter>
<header />
<content />
<leftBar />
<footer />
</containter>
I want to use the 100% of the height, as I can do with the width, but I simply dont get it work.At his moment I'm usingmin-height, but how could I use theheight:100%` ? What I like is that the footer is always visible, and you scroll the content.
Current CSS
body
{
font-family: Verdana;
font-size: 0.8em;
background-color:#f1f1f1;
}
#container {
border:solid 2px Black;
position:absolute;
left:10%;
width:80%;
margin:auto;
}
#header {
height:20px;
background: #DDDDDD;
}
#leftBar {
width: 20%;
background: #669966;
min-height:600px;
postion:absolute;
top:20px;
bottom:20px;
}
#content {
float:right;
background-color: #cdcde6;
position:absolute;
left:20%;
right:0px;
bottom:20px;
top:20px;
padding:5px;
}
#footer {
position:absolute;
height:20px;
}