Почему при указание body 100% (высоту) и у div высоту тоже 100% див выходит за края страницы и увеличивает страницу?
Вероятно потому, что у body, по умолчанию, есть margin (причем у каждого браузера разный).
Для решения этой проблемы принято в css вставлять следующий код:*{
margin: 0;
padding: 0;
border: 0;
}
Это позволяет во всех элементов зафиксировать конкретные значения отступов и границ, а не отдавать это на откуп браузеру.
По идеи не должно быть прокрутки и увеличивать страницу, попробуйте уберите padding: 0; и margin: 0; у body (браузеры автоматически ставят разные значения).
p.s высота 100%, это относительно высоте родительского контейнера, если такого нету, будет 0, или по размерам содержимого.