HTML5 / CSS - div растягивается больше чем тело на 100%

Question

Я пытаюсь выложить веб-приложение и сталкиваюсь с проблемами с элементами div, выходящими за пределы тела и HTML.

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

Розовый внутренний элемент расширяется за пределы своего контейнера, если установлен на 100% высоты.Почему это так и как мне это исправить?

Answer 1

• #header имеет высоту 55 пикселей.
• #topnav имеет высоту 65 пикселей.
• #mainsection имеет высоту 90%.
• #drawer имеет высоту 50 пикселей.

Вы пытаетесь утверждать, что 55px + 65px + 90% + 50px = 100%, но вы не можете этого сделать.Это будет справедливо для некоторой высоты (где высота всего содержимого составляет 1700 пикселей, см. Ниже), но не для всех высот:

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

---

РЕДАКТИРОВАТЬ: Вы можете достичьчто вы хотите, используя относительные / абсолютные позиции соответственно.Смотрите следующее jsFiddle: http://jsfiddle.net/Pftpu/12/

Обратите внимание, что это все равно будет больше, чем 100% из-за границ вокруг всей страницы.Вы можете обернуть их в другой div, но я хотел показать этот пример, только изменив свойства CSS, относящиеся к основной проблеме, с которой вы столкнулись.

Answer 2

Вы смешиваете пиксели и проценты, это никогда не сработает.

#mainsection имеет 90%, оставляя 10% для #header (65px), #topnav (55px) и #drawer (50px). При высоте окна, скажем, 700px, получается 70px, что намного меньше 65 + 55 + 50 = 170px.

Вам понадобится высота ровно 10x170 = 1700px, чтобы ваш макет работал - или другими словами: никогда не смешивайте пиксели и проценты ...