Beginner question about CSS and layout and height
- by vtortola
Hi,
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]
(Sorry, I cannot paste the code properly, only appears the tag "body" and the rest disapears :S ... )
As you can see, very simple stuff. I want to use the 100% of the height, as I can do with the width, but I simply don`t get it work :S At his moment I'm using min-height, but how could I use the height:100% ? What I like is that the footer is always visible, and you scroll the content.
This is what I have till the moment:
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;
}
I'm reading a book about CSS, but I still don't get the part about the height :S
Thanks in advance.
