Whilst the solution is neat and taught me things I didn’t know, I do have a worry about those users who can’t use a mouse for some reason.
As exampled it seems impossible to get the DIVs to scroll down using keystrokes. It seems to me that a sighted user who cannot use a mouse would be unable to access the text at the bottom of both the DIVs.
In a similar layout with frames tabbing would give focus to each frame in turn, and then the up and down arrow keys would scroll the individual frames.
Copy & paste the code below to embed this comment.
Brent B
I really enjoyed the article.
One issue I’m having in IE7 is getting a nested DIV to respect the calculated height of the parent div. In Firefox, setting the height property to 100% yields the desired result; that is, a div that consumes the entire height of the underlying element. In IE7, the height is ignored, presumably because the element’s height is calculated rather than specified in CSS.
If someone has a workaround, I’d be grateful for tips.
Copy & paste the code below to embed this comment.
DCkat
The layout I’m stuck with has three fixed width columns. For over two years I have tried different ways to get IE6 (may it someday RIP) to extend the background of the right and left columns all the way to the bottom of the center column (where the varying height main content is). I don’t even have (or need or want) scroll bars.
Maybe there’s an expression-free method to accomplish this somewhere out there, but I haven’t been able to find it. I’m just glad this approach works perfectly for my purpose.
Thanks for taking the time to track down and explain a classic head-scratcher to this non-expert.
Copy & paste the code below to embed this comment.
gael
Thanks, even if we’re seeing IE6 fade away, it is still very much a reality with Asian users.
I have been looking for a cross-browser option of pinning a div to the viewport’s height, preferably without the use of jquery or equivalent.
This is brilliant.
77 Reader Comments
Back to the ArticleGraham Armfield
Whilst the solution is neat and taught me things I didn’t know, I do have a worry about those users who can’t use a mouse for some reason.
As exampled it seems impossible to get the DIVs to scroll down using keystrokes. It seems to me that a sighted user who cannot use a mouse would be unable to access the text at the bottom of both the DIVs.
In a similar layout with frames tabbing would give focus to each frame in turn, and then the up and down arrow keys would scroll the individual frames.
Does anyone have any suggestions?
Brent B
I really enjoyed the article.
One issue I’m having in IE7 is getting a nested DIV to respect the calculated height of the parent div. In Firefox, setting the height property to 100% yields the desired result; that is, a div that consumes the entire height of the underlying element. In IE7, the height is ignored, presumably because the element’s height is calculated rather than specified in CSS.
If someone has a workaround, I’d be grateful for tips.
david calvert
Great article rob. Very clear and concise, eays to follow. Good job.
Ivan Ivanic
Thank you very much for this article. It solved me a month of headache.
gday
Love this technique. Had no idea this was possible. TY!!!
DCkat
The layout I’m stuck with has three fixed width columns. For over two years I have tried different ways to get IE6 (may it someday RIP) to extend the background of the right and left columns all the way to the bottom of the center column (where the varying height main content is). I don’t even have (or need or want) scroll bars.
Maybe there’s an expression-free method to accomplish this somewhere out there, but I haven’t been able to find it. I’m just glad this approach works perfectly for my purpose.
Thanks for taking the time to track down and explain a classic head-scratcher to this non-expert.
gael
Thanks, even if we’re seeing IE6 fade away, it is still very much a reality with Asian users.
I have been looking for a cross-browser option of pinning a div to the viewport’s height, preferably without the use of jquery or equivalent.
This is brilliant.