wervil
04 Apr 2011, 01:07 PM
http://websitewebsite.biz/mandymachine/about2.html
This is the page I'm working on, I'll leave this example up here indefinitely, css is in the page. You'll see I've been trying to implement the 100% height trick with marginal success.. the desired outcome is to have the semi transparent grey div to always span from top to bottom.. but when any content on the page exceeds the browser window, and you need to scroll down to read more, the gray is gone from there on down.. shorten the browser window vertically and scroll down.. it does move if you then pull the window open again because the 100% is relative to something but im not clear on what it becomes relative to once a scrollbar is introduced. must be relative to the original viewport height instead of the entire scrollable height of the page. if no content is creating a scrollbar the 100% height spans the viewport!
I've scoured the web for answers and am only finding the half assed unconfirmed answers that don't help out much.. "use bla bla" but nary to be found when or where to use it or how it translates to a custom situation, what is co***icting with html,body set to 100%. I know there are topics already on this forum about it too, but i really need help rooting out the bug in my specific case, I have to be missing something cause the suggestions don't work for me.
in my situation i have the semi transparent div positioned in the same place as an identical div for content that has no background color to it.. thats so the background is translucent but pics and text on top are not. the current workaround i'm using is simply to set the height of that grey one to 200% so it can always exceed the page, within reason.. but that creates unwanted space below and a scrollbar that implies theres something down there.
here http://apptools.com/examples/tableheight.php is an example i found of 100% height working with content in it.. its very clever, but when i try to make it work in my page something is apparently interfering.. I have tried alot of things.. spent alot of time banging my head against the screen for this. I need HELP!! does it have to be a table? I'm fine with that I tried that but it still had no result on my page.. something is co***icting.. i have alot of divs set up in order to have this layout stay two column with a transparent bg on one side.. maybe some kind of sticky footer trick or soemthing to define where the bottom is of the grey div? Also important!! in IE the 100% height doesnt work at alll! what's the hack for that!? reset.css doesn't seem to cover it.
maybe this thread can be the conclusive end of the mystery of 100% height.. please contribute!
Cheers, wervil
This is the page I'm working on, I'll leave this example up here indefinitely, css is in the page. You'll see I've been trying to implement the 100% height trick with marginal success.. the desired outcome is to have the semi transparent grey div to always span from top to bottom.. but when any content on the page exceeds the browser window, and you need to scroll down to read more, the gray is gone from there on down.. shorten the browser window vertically and scroll down.. it does move if you then pull the window open again because the 100% is relative to something but im not clear on what it becomes relative to once a scrollbar is introduced. must be relative to the original viewport height instead of the entire scrollable height of the page. if no content is creating a scrollbar the 100% height spans the viewport!
I've scoured the web for answers and am only finding the half assed unconfirmed answers that don't help out much.. "use bla bla" but nary to be found when or where to use it or how it translates to a custom situation, what is co***icting with html,body set to 100%. I know there are topics already on this forum about it too, but i really need help rooting out the bug in my specific case, I have to be missing something cause the suggestions don't work for me.
in my situation i have the semi transparent div positioned in the same place as an identical div for content that has no background color to it.. thats so the background is translucent but pics and text on top are not. the current workaround i'm using is simply to set the height of that grey one to 200% so it can always exceed the page, within reason.. but that creates unwanted space below and a scrollbar that implies theres something down there.
here http://apptools.com/examples/tableheight.php is an example i found of 100% height working with content in it.. its very clever, but when i try to make it work in my page something is apparently interfering.. I have tried alot of things.. spent alot of time banging my head against the screen for this. I need HELP!! does it have to be a table? I'm fine with that I tried that but it still had no result on my page.. something is co***icting.. i have alot of divs set up in order to have this layout stay two column with a transparent bg on one side.. maybe some kind of sticky footer trick or soemthing to define where the bottom is of the grey div? Also important!! in IE the 100% height doesnt work at alll! what's the hack for that!? reset.css doesn't seem to cover it.
maybe this thread can be the conclusive end of the mystery of 100% height.. please contribute!
Cheers, wervil