General Question

lefteh's avatar

What's the best way to force a div to extend to the bottom of a page?

Asked by lefteh (9429points) May 13th, 2009

There are threads about this all over the internet, but I don’t trust them, I trust you all. Not to mention many of the solutions are messy and/or don’t work.

Here is my site right now. It works perfectly in most browsers, but Opera and IE don’t like it. Here is a browsershots link.

Observing members: 0 Composing members: 0

7 Answers

funkdaddy's avatar

Hmmm… I typed up a big thing and then realized the whole thing is fluid. Fluid designs are one of those noble undertakings that rarely work out without a lot of thought and testing. Line lengths get too long or short, especially in multi-column designs and it tends to quickly become a mess of fringe cases. You may want to put some limits on the max and min width of the whole thing, but that’s a whole new can of browser support fun.

Enough “If I were you…”, on to answer your question, I like this technique fairly well if you can have a footer with a specified height –

The gist is that you have a clearing div that pushes content to the bottom (clear: both), then a negative margin to pull the footer back up. So if you have enough content to fill the window vertically it will just appear at the bottom of that. If not then it appears at the bottom of the browser window.

Also, if you have no need of a footer, it can be a few pixels of background color and it should still force your containing div to go full height.

I hope it helps and have fun.

richardhenry's avatar

I’m getting a not found on your first link; have you taken it down? I’m not quite sure whether or not you’re trying to attach a footer to the bottom of the viewport, or just extend the white section so that it runs the length of the page.

Why not just take something like this image and tile it vertically? If you want to retain the pattern in the background, you could work this into a transparent PNG in a container div, rendered over the body.

If you get that original file back up, I can modify it to show you what I mean.

Alternatively, if you’re wanting to stick the footer to the base of the viewport, there’s a good way to do that and I’d be happy to modify your example to show you how that would work.

Let me know!

Vinifera7's avatar

It depends on what you want to do. Shoot me a PM or something and we can discuss this.

phoenyx's avatar

How do you make it a variable width layout if you repeat-y (or whatever) the background image vertically?

I think the only way to do what you want is to use a table for your layout.

richardhenry's avatar

@phoenyx Oh crumbs, I missed that. Well, the tutorial linked to ^^^ looks helpful.

lefteh's avatar

Link changed to – sorry.
I would repeat-y an image like that, but as phoenyx said, that’d prevent a variable width layout. Maybe I’ll just have to use a table.

richardhenry's avatar

As a note, resizing the browser window causes wrapping within some of the navigation items (screenshot). It might be worth shrinking down the size of the nav controls and instead making them part of a navigation bar?

Or perhaps considering an elastic layout?

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther