WordPress.org

Support

Support » Themes and Templates » Can’t get div container to cover whole page!

Can’t get div container to cover whole page!

  • 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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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.

    whooami

    @whooami

    Member

    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

    ^ #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)

    whooami

    @whooami

    Member

    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.

    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! =/

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Can’t get div container to cover whole page!’ is closed to new replies.
Skip to toolbar