Перелистывание окна просмотра

Question

Может ли кто-нибудь объяснить мне, как выглядит ниже скрипка overflowing the viewport.

.row > .sidebar-fixed{ 
    position: absolute; 
    top: 60px; 
    width: 220px; 
    height: 100%; 
    overflow-y:scroll; 
} 
.row > .sidebar-fixed.left{ 
    left:0; 
} 
.row > .sidebar-fixed.right{ 
    right:0; 
} 

.fixed-fixed { 
    margin: 0 240px; 
} 

http://www.bootply.com/X0Bie7aRN0

При указании или жесткого кодирования некоторые top value, почему процентные значения в height not be 100% и bottom be 0

.row > .sidebar-fixed{ 
     position: absolute; 
     top: 60px; 
     width: 220px; 
     height: 100%; // should replaced by bottom: 0; 
     overflow-y:scroll; 
    } 

Answer 1

Высота являются относительно элемента containing block.

условии, что ваш абсолютно позиционирован элемент не имеет расположенный предка (с position иначе, чем static), содержащий его блок будет initial containing block, в этом случае 100% высота вычисляется на высоту просмотра.

Если вы определили объект height, без свойства bottom, свойство top просто компенсирует положение элемента, но не изменит его определенную высоту.

bottom:0 выравнивает нижний край поля поля элемента с нижним краем панели блока. (ref, demo)

И для демонстрации начального содержания, высоты и поведения позиционирования, см. this demo.

Answer 2

Что такого удивительного? height: 100% означает установку высоты элемента до 100% от его родительского элемента, если задана также высота родителя. Затем вы устанавливаете свое положение на 60 пикселей сверху, но оно не меняет высоту элемента вообще. Так что вполне естественно, что его нижний край 60 пикселей ниже видового экрана.

Что касается bottom: 0, то при указании свойства top свойство - верхний край элемента расположен на заданной высоте относительно верхнего края его родителя с position: relative|absolute. Когда вы указываете свойство bottom, нижний край элемента расположен на заданной высоте его родительского элемента с position: absolute|relative. Указание обоих этих свойств сразу приводит к растягиванию элемента. Это на самом деле довольно общий способ указания высоты элемента.