How to keep div at the bottom of the window if page not full, otherwise at the end of content

Question

I have a div in a page (footer) and I want the following to happen with CSS:

If the page has not enough content to fill the window, the div should be at the very bottom. If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.

If I do it with position absolute etc, I can't get the second case to work.

Any ideas?

score 2 · Accepted Answer · edited May 23 '17 at 11:47

2

I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.

edited May 23 '17 at 11:47

Community

1
1

answered Sep 12 '11 at 14:29

William Niu

15,798
7
53
93

score 1 · Answer 2 · answered Sep 12 '11 at 16:31

1

You want to use a sticky footer.

For example: http://ryanfait.com/sticky-footer/

or if you google Sticky footer you find a few alternatives

answered Sep 12 '11 at 16:31

Ben

1,022
3
13
23

How to keep div at the bottom of the window if page not full, otherwise at the end of content

2 Answers2