Taking into account the question I raised earlier:
How can a div be made to occupy the remaining vertical space using CSS?
I received an answer which I have been experimenting with lately:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Ultimately, my goal is to achieve this:
To cover 100% of the screen while being able to choose how those percentages are distributed, for example:
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
In this setup, both html and body have a height of 100%, effectively filling the screen. The header takes up 15% in terms of height, the nav bar and body take up 70%, and the footer completes the remaining 15%, adding up to the full visible screen...
However, there seems to be an issue with my footer:
#footer {
float: bottom;
width: 100%;
height: 10%;
background-color: yellow;
}
Removing height: 15% allows me to see the yellow background color properly:
If I keep it, the color looks more greyish and occupies around 20% of the screen:
So, the main question now is how can I make sure that my divisions occupy the exact percentage height that I assigned to them?
I hope this all makes sense.
Thank you for your help.