Как нарисовать треугольник программно

Отказ от ответственности: принятый ответ дает идею решения, но я нахожу его немного раздутым с ненужными правилами оболочки и CSS. Ниже представлено решение с очень небольшим количеством правил CSS.

HTML 5

    
Header with an arbitrary height
    

        This container will grow so as to take the remaining height
    

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Решение выше использует единицы просмотра и flexbox и, следовательно, IE10 +, предоставляя вам старый синтаксис для IE10.

Codepen для воспроизведения с: ссылкой to codepen

Или этот, для тех, кому нужен прокручиваемый основной контейнер в случае переполнения содержимого: ссылка на codepen