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 conflicting 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 conflicting.. 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!
Hey I think i've figured this
the answer to your prayers here is using fixed positioning on the div you want to stay 100 %
this works with my example.. i made the pillar div, my semi transparent backdrop with no content inside as fixed.. i have to go test it on all the browsers and what not but i think this is the breakthrough and i hope this helps save somebody hours of clambering through awful forums with no clear directives
I'd go about this
I'd go about this differently.
Remove all the position:absolute and position:relative
float #logomenu right
float #content left
From here, this will line things up and the only thing that is missing is the grey background
I would move the background you have on body to html and then
set body width to 901px, margin: 0 auto
and give it a background of a semi-transparent gray bar on the left side, 1px tall, and repeat-y
This is a form of the faux-columns technique and should solve your issue.
Feel free to post back if you continue to have isues.