In table of height 500px, if we have 2 rows and we set the first one 100px, the second will fill in the rest of the space. In CSS, we can all so make our div behave the same as table. Here sample code:
<html>
<head>
<style>
#main {
height: 100%;
width: 100%;
position: relative;
}
#top{
background-color: blue;
height: 200px;
}
#bottom{
background-color: gray;
position: absolute;
bottom: 0px;
top: 200px;
width: 100%
}
</style>
</head>
<body>
<div id="main">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>
Tags: CSS