100% контейнер высота DIV не работает с заголовком

Question

См http://jsfiddle.net/oedev/pag7ahz2/

У меня есть следующий макет страницы:

• CMain - главная страница контейнер
• cBanner - баннерная контейнер
• cNavigation - навигация контейнер
• cContent - содержимое содержимого контейнера

Все они имеют размер 100%, так как я хочу, чтобы содержимое страницы было размером 100% (кроме баннера).

html, body { 
    height: 100%; 
} 

#cMain { 
    height: 100%; 
} 

#cBanner { 
    background: #002d62 top center no-repeat scroll; 
    height: 200px; 
    margin-bottom: 1em; 
    margin-top: 1em;  
} 

#cContent { 
    height: 100% 
} 

Я установил высоту html, body и содержащий divs на 100%.

Однако, поскольку у меня есть логотип заголовка и навигатор, div под ними не имеет размера на 100% (у меня заканчивается полоса прокрутки).

Если я удаляю div и div заголовка заголовка, содержимое div имеет размер @ 100% без полос прокрутки.

Answer 1

Снимите высоту с тега тела.

html { 
    height: 100%; 
} 

Или установить высоту мин для тела, как показано на этом посту: Make body have 100% of the browser height

html { 
    height: 100% 
} 
body { 
    min-height: 100%; 
}