How to make an endless div after a fixed height div?
This question already has an answer here:
I would probably use some Javascript to solve this problem. It is probably the only good way you are going to solve this, considering the many inconsistencies that occur between IE and the rest of the browser community. Use a framework like JQuery to automatically set the height of the second div, that way you can be sure that the same effect will be consistent across all browsers as JQuery is cross browser compliant.
Make use of position: absolute , there is a trick when you specify top and bottom at the same time, basically stretching your div:
<!DOCTYPE html>
<html>
<head>
<style>
body { height: 100%; margin: 0; }
#felso { height: 100px; }
#also { position: absolute; top: 102px; bottom: 0; left: 0; right: 0; }
</style>
</head>
<body>
<div id="felso"></div>
<div id="also"></div>
</body>
</html>
Tweak it according to your specific needs. I wrote 102px for top because of the borders, which add 1px * 2 to the height of #felso .
jsFiddle Demo
I don't think this is possible in pure CSS because you cannot do 100% - 100px. You can use a table with height 100% and two rows. Then the first row is 100px and the second one takes the rest of the height.
<table style="height:100%;">
<tr>
<td style="height:100px;">instead of div 1, is 100px</td>
</tr>
<tr>
<td>instead of div 2, takes the rest of the height</td>
</tr>
</table>