контейнера «Absolute» подходит окно просмотра без правил CSS ширина/высоты

Question

я нашел эту страницу: http://www.maddim.com/demos/spark-wp/

Существует фиксированный заголовок и ДИВ под который тянется к области просмотра без необходимости ширины или высоты, определенной. Это позволяет переполнять содержимое по оси Y и при необходимости применяет полосу прокрутки (прокрутка окна, без полосы прокрутки). HTML очень прост:

<header> ... </header> 
<div id="main" role="main"> ... </div> 

CSS:

#main { 
bottom: 0; 
left: 0; 
overflow-y: scroll; 
position: absolute; 
right: 0; 
top: 89px; 
} 

После отключения всех JS и удаления большинства элементов страницы в поджигатель, голый #main элемент до сих пор ведет себя, как и раньше.

Какая техника была использована здесь и где она была определена для создания такого поведения контейнера #main?

Answer 1

Вот некоторые основы CSS. bottom: 0; говорит именно это. Прикрепите нижнюю часть элемента 0 пикселей к нижней части окна просмотра. left: 0; и right: 0; сделав по существу одинаковый. overflow-y: scroll; говорит, что разрешает прокрутку содержимого, которое переполняется в вертикальной ориентации, и position: absolute; говорит, что этот элемент выходит из потока страниц и прикрепляет его к странице в одном месте. top: 89px; дает место для заголовка, позиционируя этот элемент 89 пикселей от вершины окна просмотра.