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

См. 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 и содержащих div на 100%.

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

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


html css twitter-bootstrap
person OEDev    schedule 03.08.2015    source источник
comment
привет, я думаю, тебе нужно применить height:auto ** к html,body вместо **100%   -  person Himesh Aadeshara    schedule 03.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Удалите высоту из тега body.

html {
    height: 100%;
}

Или установите минимальную высоту тела, как показано в этом посте: иметь 100 % высоты браузера

html {
    height: 100%
}
body {
    min-height: 100%;
}
person Raldo94    schedule 03.08.2015
comment
Спасибо, удаление 100% высоты в теге html работает до некоторой степени, поскольку удаляет полосы прокрутки. В моем контейнере контента я размещаю сетку пользовательского интерфейса Kendo, которая включает элементы управления пейджингом. Если я увеличу размер своего окна, я ожидаю, что они переместятся в нижнюю часть моего окна. Этого не происходит. На основе этого примера здесь: jsfiddle.net/dimodi/SDFsz - person OEDev; 03.08.2015