We help IT Professionals succeed at work.

scollable div column to max height of screen

dolythgoe
dolythgoe asked
on
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
Comment
Watch Question

Top Expert 2011
Commented:
It can be done with just CSS in modern browsers. If your wanting to support older browsers and non-compliant browsers like IE then you may have difficulties duplicating the effect.

All they are doing is setting a position:fixed to the sidebar and when you hover set overflow-y:scroll

Pretty simple really
#sidebar{position:fixed;left:0px;top:50px;overflow:hidden;}
#sidebar:hover{overflow-y:scroll;}

Open in new window

Author

Commented:
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!

Author

Commented:
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
Top Expert 2011

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

Author

Commented:
soz I meant ff 7

Author

Commented:
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
Top Expert 2011

Commented:
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.

Author

Commented:
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
Top Expert 2011

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

Author

Commented:
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?

Author

Commented:
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
Top Expert 2011

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

Author

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

Thanks for your help.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.