CSS help - getting an element to fill 100% of the remaining vertical space
I would consider myself a reasonable standard CSS / XHTML member, but I'm pretty confused about it.
The issue is available here: http://furnace.howcode.com - (note that the site is still under development, most things are not working and this can change quite quickly as it is updated frequently).
Basically, I have a fluid layout that should work in the same proportions at any resolution.
Here is a screenshot of how the designer invited him (sorry for my Paint-tool announcements): how the designer wants it to look http://files.droplr.com/files/49111734/XVu5m.howcode_working4.png
I want the tabs and the STAY search box to be at the top of Col2, while there should be a scrollable area underneath where the results are returned. I want no vertical viewfinder to scroll, only within the 100% area of the area.
This is my problem. If you look at http://furnace.howcode.com you can see that I have a problem. I made a tap-sheet with a black background, which I will be moving to Tabs shortly. However, I want the Col2 div to float BENEATH and fill 100% of the remaining vertical height (i.e. go to the bottom of the screen, specify what the resolution is) and Col3 to be where Col2 was placed (this usually happens automatically when Col2 is in the right place!).
Hope this makes sense. If you need to clarify, please just ask.
Hooray! Jack
a source to share
I really think that you cannot do this by simply using HTML and CSS. Just because if you want to have a scrollable div you have to give it a fixed height, but I'm sure if you give it a height of 100% it will just expand to show all of its content.
For this solution to work, you will need to use Javascript to correct the height of the scrollable area. You will need to fix the height of this div based on the height of the window on page load, and also resize the div if the window resizes.
Something like this might work:
$(document).ready(function(){
$("#myScrollableDiv").height($(window).height() - $("#myHeader").height());
});
Just replace ids with your ids in HTML
a source to share