Решение Flexbox

Схема Flex предпочтительна для естественной высоты заголовка и нижнего колонтитула. Это гибкое решение проверено в современных браузерах и фактически работает :) в IE11.

См. JS Fiddle .

HTML

  & Lt; & тела GT;  & Lt; & заголовок GT;  ... & lt; / header & gt;  & Л; Основной & GT;  ... & lt; / main & gt;  & Lt; & сноска GT;  ... & lt; / footer & gt;  & Lt; / тело & GT;   

CSS

  html {height: 100%;  } тело {высота: 100%;  min-height: 100vh;  overflow-y: auto;  -webkit-overflow-scrolling: touch;  margin: 0;  дисплей: flex;  flex-direction: column;  } main {flex-grow: 1;  flex-shrink: 0;  } header, footer {flex: none;  }