Это блок, содержащий "шапку" сайта вместе с его основной частью (т.е. все, за исключением футера страницы). Этот блок имеет желтую границу. В него могут быть помещены другие блоки, а также любые иные элементы. Например, - блок темно-синего цвета с пунктирной границей. Вне зависимости от содержимого и его размера, этот блок будет "прибит" к верху страницы.
Как видим, тег html имеет черную границу, тег body - зеленую.
Попробуйте уменьшить или увеличить масштаб страницы. И посмотрите, что будет происходить с ней.
А происходить будет вот что. Пока текст будет помещаться на странице (т.е. пока нижняя часть пунктирной темно-синей границы не приблизится к нижней части желтой), граница между желтым и коричневым блоками будет оставаться примерно на одном месте. Причем, футер будет оставаться на своем месте - в самом низу страницы. Однако, если масштаб будет превышать некоторое критическое значение, то нижние части темно-синей и желтой границ будут уходить вниз, а вместе с ними - и футер. При этом футер не выйдет за пределы тега body (так как всегда будет содержаться внутри зеленой рамки). При этом появится вертикальная полоса прокрутки.
Впрочем, полоса прокрутки и так есть, что обусловлено наличием границ у элементов html и body. Эти границы сделаны лишь для наглядности, на реальных вебстраницах они практически не используются. Если Вы нажмете на кнопку, чтобы убрать эти границы, при низком масштабе (т.е. когда страница уменьшена в размере и видна на экране вся целиком) полосы прокрутки не будет.
Важно, что высота футера определяется исключительно его содержимым и никак не задается.