Question

I am trying to lay out a web application and running into problems with divs stretching outside of body and html.

http://jsfiddle.net/dex3703/Pftpu/

The pink inner div extends outside of its container when set to 100% height. Why is this and how do I fix it?

Answer 1

• #header has a height of 55px.
• #topnav has a height of 65px.
• #mainsection has a height of 90%.
• #drawer has a height of 50px.

You’re trying to assert that 55px + 65px + 90% + 50px = 100%, but you can’t do that. It will be true for some height (where the height of your whole content is 1700px, see below), but not all heights:

55px + 65px + 90% + 50px = 100%
55px + 65px + 50px       = 10%
170px                    = 10%
1700px                   = 100%

---

EDIT: You can achieve what you want by using relative/absolute positions appropriately. See the following jsFiddle: http://jsfiddle.net/Pftpu/12/

Note that this will still be greater than 100% because of the borders around the entirety of the page. You can wrap them in another div, but I wanted to show this example by only changing the CSS properties relevant to the main issue you were having.