Results 1 to 2 of 2

Thread: Issue with 100% div height

  1. #1
    Join Date
    May 2008
    Posts
    17

    Question Issue with 100% div height

    My content area currently scales the page down if the content overflows from it. This is great, and exactly what I want.

    The issue is that when the content doesn't reach the footer, the div's height only matches it's content. I want it to reach the footer at all times (this means it has to be 100% of the page-container div - see diagram below).

    All divs from #content and up to #page-contain have their min-height and height set to 100%. The only way I've managed to actually change the height of the div to a set height (not in percentage) and add overflow:hidden - neither of which I want, as the page should scale with resolution.

    Basically, I want my content div (with its light grey background) to always scale down until it reaches the footer - even when the content isn't enough to reach it. (it should also move the footer down when the content is more than enough).

    ----------------

    I've got a rather complicated site set up, with a whole bunch of divs and div containers. I've got them all there for a reason, so there are only 1 or 2 of these which I can maybe get rid of.

    I'll try to lay it out for you.

    • page-container - contains everything except the footer (raised with a negative margin for the footer).
      • header
      • widthset - this is because some pages have 100% width and some have less. basically it sets the width of the menu/content area.
        • menu
        • content-contain - I tried setting this up right now to fix this issue. Didn't really help.
          • content
    • footer - (outside the page-container div)


    I have colored the divs in my site so you can better understand where everything is, the colors are: #page-contain #widthset #content-contain, while #content remains it's natural light grey.

    Check the "about" page and click on the headers. They will scale down and show you how the site currently responds to overflow.

    Here are links for your comfort:

    1. THE WEBSITE
    2. THE CSS FILE



    Thanks in advance for you time, this has really been driving me crazy for the past couple of days.

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    I can show you two examples:-
    http://www.wickham43.net/fullheightdiv.php
    where a div background extends full height

    and items 16, 18 and 19 here which are more complicated (designed for pages without a sticky footer although you could add one):-
    http://www.wickham43.net/firefoxbackground.php

    and then there are "sticky footer" options with two main types:-
    one where the footer is always visible and the content scrolls behind it if there is lots of content or it sticks to the bottom if there is little content (doesn't work in IE6), item 1a in link below

    and another where the footer is either at the bottom of a page which has little content or sits below a page with lots of content and scrolls normally (so this is best for pages with not much content as it also works in IE6) item 1b in link below
    http://www.wickham43.net/headerfooterfix.php

    This example has a sticky footer type 1b which would stick to the bottom if there was much less content on the right, but combines a method of extending column backgrounds full height.
    http://www.wickham43.net/backgroundsfullheight2col.html
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Tags for this Thread

Posting Permissions

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