Getting a 100% height to actually be 100%

[schedal]

Hello CSS gurus,

Best site around for sure! I have a problem with a page. I have successfully resolved all of the CSS problems I needed to, but one remains.

http://chedal.org/test/

On this page, the footer needs to bottom align, but also the light page edge needs to connect all the way to the bottom. For a reason that baffles me, as you drag the window size up and down, it moves the footer, but it also makes this white space at the sides of the page, where the background image from the .main class should be… it looks as if the main height:100% fills what it thinks is the screen height, but it does not re-adjust that height when the page is then resized…

Any suggestions?

Thanks! :ugeek:

[dcp3450]

review and add correct absolute and relative positioning. The page is just basing the location of divs based on their order.

[schedal]

Hello dcp, thanks for your reply.
I tried adding some absolute, fixed and relative positions, but I get the same issue…
If you load up the page, and you go to the CSS tag: .main and turn off [with firebug] the height:100% attribute, then the BG goes all the way down like it should, but then the right columns peachy fuzz color wont go to height:100% because its parent tag is no longer set to 100%…
I dont feel like the positionGDN___ is the solution, but maybe it is? if so, could you please shed some more clarity on how I would go about resolving this issue without breaking other parts of the CSS? thanks!!

Seb. :geek:

[schedal]

Oh and I need the footer to not go over the text, but to "lock" at the bottom of the .main when the window is re-sized to be very narrow, so this is another reason why I dont think position:fixed or absolute will work for me.

[schedal]

Ok I am now VERY close, I used the technique listed here:

http://www.cssstickyfooter.com/

Which was very effective!

However, I have now the issue that the right column’s peach color will not extend all the way down to the footer [even though it is set to "height:100%" the parent CSS tag seemingly has to have height:auto for the footer to attach; but how can I do both???

Mesmerized by code…
:shock:

Thanks for your help!

[schedal]

yaay!! ok, "I solved it" however I am not sure if it is considered ‘cheating’. I used jquery to grab the height of the left column, and to then write this height to the right column dynamically on page load. as i couldn’t see any other way of retaining height:auto and still have height:100% of a sub-div…

in the meantime I also have now added http://jqueryfordesigners.com/fixed-floating-elements/ to the right side, since this is the style that my client wants.

…so problem solved, and now its just a question of adding the top nav and I’ll be done; phew! :D

[Author]

Posts