Question

I have a fixed footer div and a content div. Content div is 100% height and I want it not to go through the footer, although I do not want to give percent value that is less than 100%.

<!-- fixed --><div id="footer" style="border:4px solid black;">
<div>

<!-- crosses the footer thus fails --><div id="content" style="border:4px solid blue;">
</div>

Here is a JSFiddle link: http://jsfiddle.net/TAVmF/2/

Bottom border of blue box should be on top of black box’s border AND it should not cross it.

A result of the way I want it to be is next: http://i49.tinypic.com/2hs3mna.jpg

Thank you in advance.

Answer 1

Remove position:fixed from footer and interchange the html code of container and footer divs.

DEMO

---

DEMO 2