Help with CSS - getting an element to fill 100% of the remaining vertical space

Question

Hi folks

I'd consider myself a reasonable standard CSS/XHTML chap but I'm pretty baffled by this.

The problem is available here: http://furnace.howcode.com - (note that the site is still in development, most stuff doesn't work, and it's likely to change fairly quickly as it is updated often).

Basically I've got a fluid layout that needs to work in the same proportions on any resolution.

Here's a screenshot of how the designer invisioned it (I apologise for my Paint-tool anotations):

I want the tabs and the search box to STAY at the top of Col2, whilst there should be a scrollable area beneath it where the results are returned. I want NO vertical viewport scrolling, only within the 100%-height area thingy.

My problem is this. If you take a look at http://furnace.howcode.com, you'll see that I've got a bit of a problem. I've made a placeholder black-background div which I will turn into the Tabs shortly. However I want the Col2 div to float BENEATH this and fill 100% of the remaining vertical height (i.e. go to the bottom of the screen, nomatter what the resolution is) and Col3 to be in the place where Col2 currently has been put (it normally is there automatically, when Col2 is in the right place!).

I hope that makes sense. If you need to me to clarify please just ask.

Cheers! Jack

Answer 1

I really think you cannot do this simply by using HTML and CSS. Simply because if you want to have a scrollable div you have to give it a fixed height but I am pretty sure that if you give it a height of 100% it will just expand to show all its content.

For this solution to work, you would have to use Javascript to fix the height of the scrollable area. You would have to fix the height of that div based on the height of the window when the page loads and also resize the div if the window resizes.

Somthing like this could work :

$(document).ready(function(){
    $("#myScrollableDiv").height($(window).height() - $("#myHeader").height());
});

Just replace the IDs to be your IDs in the HTML

Answer 2

Make three height:100% divs (col1, col2, col3) that reach from top to bottom, and put the tabs etc. inside col2.