WordPress.org

Ready to get started?Download WordPress

Forums

Can't get div container to cover whole page! (8 posts)

  1. graham1956
    Member
    Posted 6 years ago #

    Hi. I can't for the life of me get the div container in my layout to go down to the very bottom of the page. It ends about 1/3 of the page down even though I have defined it's height should be 100% of the page by CSS. Here's my Css:

    body {
    font-family: "Trebuchet MS", arial;
    font-size: 9px;
    color: #666666;
    height: 100%;
    }

    #container {
    margin : 0 auto;
    width: 100%;
    height: 100%;
    text-align : left;
    }

    I'm really stuck. This is also messing up my footer which won't go to the bottom of the page since the container ends so soon. Please help! Thanks!

  2. Kalessin
    Member
    Posted 6 years ago #

    Instead of width and height, try setting:

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    I think you have to set the position for this to work, but I cannot remember offhand which attribute... Try all four and let me know how you get on.

  3. whooami
    Member
    Posted 6 years ago #

    you cannot just assign a 100% bit to a <div> element. 100% of what? <--- thats the problem.

    What you end up with is a height that is determined by the content within the element.

    You have to assign a height to the parent element first in order to do what you want.

    --

    And by the way, this is a googlable problem.

    http://www.google.com/search?hl=en&q=height+100%25+css&btnG=Google+Search

    the 5th link provides a very good example of what I just described, by setting the html and body height

  4. graham1956
    Member
    Posted 6 years ago #

    ^ #whooami I thought I did do this. I did assign what is the "model" 100%, the body is defined as height: 100% (see CSS) which I read does set what 100% is for the divs. How would I assign a height to the parent so that it works? please explain.

    @Kalessin - Thanks for your suggestion but this didn't work. The div still ends way too soon. (the position would be position: absolute, but still nothing changed)

  5. whooami
    Member
    Posted 6 years ago #

    the 5th link provides a very good example of what I just described

    as this is something thats covered ad nauseum on the web, theres little use in duplicating those other efforts. There are hundreds of examples.

  6. Kalessin
    Member
    Posted 6 years ago #

  7. graham1956
    Member
    Posted 6 years ago #

    whooami, I followed the instructions exactly of the 5th result, assigned both body & html to be 100%, container still ends too soon. No idea what i'm doing wrong! =/

  8. Melton Cartes
    Member
    Posted 6 years ago #

    This sounds similar to a problem I'm having (see my post: Fake and scalable 100% height "background" image doesn't work in IE6).

    However, I got it working (after reviewing all of the other resources on the net) on Saf, FF and IE6.

    IE7 is the problem.

    I was trying to force a 1px tall graphic to be 100% of the window height.

    I've since abandoned that design and now I have a footer image that won't go to the very bottom (http://www.gaycouplesgetmarried.com).

    Graham1956, is this happening across browsers or as with mine in IE7?

    mc

Topic Closed

This topic has been closed to new replies.

About this Topic