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:
font-family: “Trebuchet MS”, arial;
margin : 0 auto;
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!
Instead of width and height, try setting:
top: 0; right: 0; bottom: 0; left: 0;
I think you have to set the
positionfor this to work, but I cannot remember offhand which attribute… Try all four and let me know how you get on.
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.
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)
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?
- The topic ‘Can’t get div container to cover whole page!’ is closed to new replies.