Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: 100% height not working despite doing the obvious

  1. #1
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Unhappy 100% height not working despite doing the obvious

    Hi, I am hoping someone out there can help me to get my container div to stretch vertically over the whole page.
    Even though I have content inside it it wont even stretch to the bottom of that.

    I have set the html and body and the div itself to 100%.

    The address is www.vander.co.nz/Index2.html

    The css is www.vander.co.nz/Main.css

    Please help I am at my wits end with this and cannot figure out any other way.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Hi brad_langdon,

    and a warm Welcome to the forum

    You had validation errors:
    http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

    http://validator.w3.org/check?uri=ht...Inline&group=0

    Your problem is a common nested div problem.

    A temporary fix would be changing your div having a box id's height from 100% to higher
    Code:
    <div style="height: 1010px;" id="box" align="center">
    Hope that helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. The Following User Says Thank You to rangana For This Useful Post:

    brad_langdon (04-10-2008)

  4. #3
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    Thanks for that.

    But isn't that the same as defining the height for each page.

    Was hoping to have it automatic so that it would adjust the height according to how much content was on each page.

    Or was your solution just to keep it sorted until I got the page properly validated?

  5. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    HOnestly, I can't figure it (for now), where's the mess...

    ...I suggest that you validte your page...there are times that the error are fixed together with the validation
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. The Following User Says Thank You to rangana For This Useful Post:

    brad_langdon (04-10-2008)

  7. #5
    Join Date
    Nov 2006
    Posts
    20
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    this code is not take the 100% Height

  8. The Following User Says Thank You to sreenivasulareddy For This Useful Post:

    brad_langdon (04-10-2008)

  9. #6
    Join Date
    Nov 2006
    Posts
    20
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  10. The Following User Says Thank You to sreenivasulareddy For This Useful Post:

    brad_langdon (04-10-2008)

  11. #7
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    Thanks alot for your help guys.

    I tried changing that code at the top of my index page but I am still having the same problem.

    As it has now been changed to html instead of xhtml I am getting a bunch of tag errors when I validate it but apart from those errors the problem is 1 error relating to a div tag.

  12. #8
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    I have changed it back to xhtml and I have also managed to get rid of ALL of the validation errors.

    Still have the 100% height problem though.

    Thanks for helping me this far but it would be great if someone could help me sort out this final height problem

  13. #9
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Hey, I must say you have done an extensive and impressive job..yet you still have one controllable error.

    I wonder why your CSS validates...yet there is no align property
    Code:
    #box
    {	padding:0px;
    	align:center;
    	margin:0 auto;
    	background:url(Images/BGlight.jpg) top center repeat;
    	border-left:1px solid #999999;
    	border-right:1px solid #999999;
    	width:690px;
    	min-height:100%;
    	height:100%;
    }
    ...Anyway, I would suggest some fix, try changing your contentcon div to:
    Code:
    #contentcon
    {	
    	width:100%;
    	height:auto;
    	background:url(Images/BGlight.jpg) top center repeat;
    }
    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  14. The Following User Says Thank You to rangana For This Useful Post:

    brad_langdon (04-11-2008)

  15. #10
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Red face

    I tried that with no success unfortunately.

    Its weird because technically all of the content should be inside #box but it is stopping around halfway down...doesn't make alot of sense to me.

    Even when I change the height of #box to something really small like 200px it stays exactly the same which makes me think it isn't communicating with the style sheet properly or something but some properties will change when asked its just the height that wont...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •