Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Sep 2009
    Posts
    3
    Member #
    19826
    Hey everyone,

    I was wondering if anyone had any resources or anything for making divs extend to the bottom of the page? I've gone through every google result but can't seem to make their suggestions work for my website.

    I was trying to go with the 100% height for html, body, and div method but then switched to making a bar that is repeated downwards for the background.

    Could someone give me a hand? Or provide a good resource for how to structure this type of model for a website?

    Thank you

  2.  

  3. #2
    Member Breezy's Avatar
    Join Date
    Sep 2009
    Posts
    51
    Member #
    19824
    nest your target div inside a catch-all div, then get the height of your main div with document.getElementById("yourDIV").offsetHeight, then divide it by the height of your repeating div, and that's how many times your repeating div needs to repeat.
    Utah Web Design { Pimpin(it); } - ENJOY yo-self

  4. #3
    Member Breezy's Avatar
    Join Date
    Sep 2009
    Posts
    51
    Member #
    19824
    :nervous: ...oh and of course you'll need to do all that in JS
    Utah Web Design { Pimpin(it); } - ENJOY yo-self

  5. #4
    Junior Member
    Join Date
    Sep 2009
    Posts
    3
    Member #
    19826
    Using JS just feels like such the slacker way to go!

    But if I do just go JS shouldn't I just make the navigation bar equal height to that of the content bar beside it? Rather than doing the math for the repeating background image?

  6. #5
    Member Breezy's Avatar
    Join Date
    Sep 2009
    Posts
    51
    Member #
    19824
    right yes... just thought from your post that was the way you wanted it done... not here to judge, just help ;-)
    Utah Web Design { Pimpin(it); } - ENJOY yo-self

  7. #6
    Junior Member
    Join Date
    Sep 2009
    Posts
    3
    Member #
    19826
    Okay, going the javascript route, if I wanted two divs (within a container div) to have the same height wouldn't this code be sufficient?

    note that both are floating

    Code:
    window.onload = startUp;
    
    function startUp(){    
    
    document.getElementById("NavContainer").height = document.getElementById("mainContainer").height;
    
    
    }

  8. #7
    Member Breezy's Avatar
    Join Date
    Sep 2009
    Posts
    51
    Member #
    19824
    yeah as long as you didn't have any dynamic content in either of those divs... otherwise you'd need to call it from the onchange events of each div as well :-)
    Utah Web Design { Pimpin(it); } - ENJOY yo-self

  9. #8
    Member Breezy's Avatar
    Join Date
    Sep 2009
    Posts
    51
    Member #
    19824
    hmmmm.... and not sure why I went for offsetHeight as the property to use before... though I think I'm in the habit because of IE's disparity between the height property and the actual height it displays objects after border, margin and padding. But you are absolutely right to choose .height for floating divs because they don't offset other elements, therefore no offsetHeight (you prob knew all that - just thought I'd explain for others reading the thread).
    Utah Web Design { Pimpin(it); } - ENJOY yo-self


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com