2 replies [Last post]
wervil
wervil's picture
Offline
newbie
Last seen: 9 years 41 weeks ago
Timezone: GMT-5
Joined: 2011-04-01
Posts: 2
Points: 3

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 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!
Steve

Cheers, wervil

wervil
wervil's picture
Offline
newbie
Last seen: 9 years 41 weeks ago
Timezone: GMT-5
Joined: 2011-04-01
Posts: 2
Points: 3

Hey I think i've figured this

Hey I think i've figured this one out........... i got really frustrated because people have apparently come up with all manner of fixes for this kind of thing, and i tried them all and they didnt work for me i dont know why.. including javascript hacks, just to configure height??? come on.

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

Cheers
Glasses

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 26 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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
delete #pillar
delete #page
delete #center

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.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph