CODEWITHSUNDEEP
css
Matthew
Matthew

Reputation: 11270

div height 100% but not over absolute sticky footer

I try to make a div expand in height, but it's expanding over the absolute positionned sticky footer at the bottom, here is a demo:

http://jsfiddle.net/UMLKf/1/

(I don't need to support old browsers)

Upvotes: 0

Views: 314

Answers (2)

Adaz
Adaz

Reputation: 1665

Try this on your main div:

#content { position: absolute; top: 0; left: 0; right: 0; bottom: 200px; }

and footer:

#footer { position: absolute; bottom: 0; height: 200px; }

This could probably work with position: relative as well.

EDIT:

Here's a demo: http://jsfiddle.net/adaz/nQVPm/

I'm pretty sure this works on IE7+

Upvotes: 1

magicalex
magicalex

Reputation: 937

Your margin-bottom: 200px rule will only affect subsequent elements in the document flow. It will not make your div 200px smaller than the browser window. To demonstrate I've set up a jsFiddle here.

If you want the bottom of your div to be 200px from the bottom of the browser window, you could absolutely position it with top: 0 and bottom: 200px. JsFiddle here.

Upvotes: 1

Related Questions