asked on

scollable div column to max height of screen

Hello,

I'm trying to make a <div> left column scrollable just like google image search:

http://www.google.co.uk/search?q=scrolling+column+in+css+max+height+of+screen&hl=en&safe=off&client=firefox-a&hs=GF4&rls=org.mozilla:en-GB:official&prmd=imvns&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&biw=1540&bih=856&um=1&ie=UTF-8&tbm=isch&source=og&sa=N&tab=wi#q=burger&um=1&hl=en&safe=off&client=firefox-a&hs=gvO&rls=org.mozilla:en-GB:official&tbm=isch&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=e0828f5a55a53c6a&biw=1540&bih=856

Notice that the scrollbar appears when the mouse hovers over and the scroll bar is always the available height of the screen from the header.

How could I begin to achieve this? Is it a bit of jquery or just css?

Cheers

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dolythgoe

ASKER

Good quality compliant browsers! Well, with IE, I've decided not to bother with 6 since it's 10 years old and it needs killing. IE 7 still at around 3-4% so I'll give it a test in that too.

Thanks for your help!

dolythgoe

ASKER

Hi,

I tried your code and all looks good apart from the scrollbar is disabled and non-scrollable when I hover over. (Using FF 6)

The column and content area are in a fluid layout wrapped in a <div>, perhaps that's what's affecting it?

Cheers

LZ1

Can you post a live URL? (best) Or rendered HTML/CSS?

dolythgoe

ASKER

soz I meant ff 7

dolythgoe

ASKER

Sorry don't have the live link - I'll need to process the html a bit beofre posting.

I did add a 'height' attribute and the scrollbar appeared with slightly odd results though, the scollbar would disappear below the bttom edge of the screen. It seems as if the disabled scrollbar is extending to the full height of the column as opposed to the visible height of the screen - which makes sense why it's not scrollable but doesn't make much sense why it's not detecting the base of the screen.

LZ1

The scroll bar will be the height of whatever element it's set to scroll with. So you may need another container div and set the scroll on that. Then your inner content.

dolythgoe

ASKER

Ahh, that makes sense! All is good, except trying to determine the height for variable screen resolutions. I have a fixed header with px height but ths column will have % height. Any tricks for this or just find a suitable % that works with common resolutions?

Thanks again!

LZ1

You could use some good ol' fashioned Javascript:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

dolythgoe

ASKER

Might have too :) - on, there's one more thing, the column content jumps back to the top when the mouse leaves the column as opposed to remembering the scoll position. Can that be fixed with CSS?

dolythgoe

ASKER

Just FYI, I used this jquery for the column resize thing:

$(document).ready(function() {	

                var topheight = 186;
                $(window).resize(function() {
			//Get and set size of fixed filter column depending on viewport hieght
			$('#filter_content').css('height', ($(window).height() - topheight));
		});
                
                //on page load, set the height
		$('#filter_content').css('height', ($(window).height() - topheight));
		
		
});

Open in new window

LZ1

If you could get a live URL up of it, that would be ideal. Or at least give some HTML/CSS code too

dolythgoe

ASKER

It's ok now, I'm using a non-hover affect, just auto anyway now so it's all fine.

Thanks for your help.