/    Sign up×
Community /Pin to ProfileBookmark

Positioning content at the bottom of the browser without absolute positioning

Copy linkTweet thisAlerts:
May 11.2004

Hi there,

I’m trying to position a footer at the bottom of my pages, regardless of the browser length. I can’t use absolute positioning due to pages which require vertical scrolling. I’ve tried using relative positioning with body and div heights of 100%, however, on pages that are shorter than the browser height, the footer moves up from the bottom of the window in IE.

A link which displays this problem is:
[url]http://193.201.133.11/test/services.html[/url]

On pages where the content requires vertical scrolling, the footer (and blue border) is positioned correctly (i.e. at the bottom of the window).

Does anyone have any suggestions to help me get around this?

Thanks in advance for your help.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWMay 11.2004 — There's a couple of threads in here about 100% height. That's what you're looking for.
Copy linkTweet thisAlerts:
@Matt_DJauthorMay 11.2004 — I've read through these and have used the suggestions for ensuring that the vertical borders on the side of my page extend to the bottom of the browser window, however, I can't get the positioning of the footer correct.

I've also tried setting the height of the table containing the content to 100% but the footer extends a long way beyond the bottom of the browser when I do this.
Copy linkTweet thisAlerts:
@DaveSWMay 11.2004 — To make those suggestions work you shouldn't be using tables for layout...
×

Success!

Help @Matt_DJ spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...