CODEWITHSUNDEEP
csshtmllayout
dex3703
dex3703

Reputation: 2097

HTML5/CSS - div stretching greater than body 100%

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?

Upvotes: 0

Views: 972

Answers (2)

Jon Newmuis
Jon Newmuis

Reputation: 26492

  • #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.

Upvotes: 1

ptriek
ptriek

Reputation: 9276

You're mixing pixels and percentages, that'll never work.

#mainsection has 90%, leaving 10% for #header (65px), #topnav (55px) and #drawer (50px). At a window height of, say 700px, that leaves 70px - which is a whole lot less then 65+55+50=170px.

You'd need a height of exactly 10x170=1700px for your layout to work - or in other words: never mix pixels and percentages...

Upvotes: 0

Related Questions