뷰포트 넘침

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를 기준으로합니다. 하여 절대 위치 요소 (static 상이한 position으로) 어떤 위치 조상이없는 제공자

그 함유 블록이 경우 initial containing block 것이다 100% 높이 뷰포트의 높이를 계산한다.

bottom 속성이없는 height 속성을 정의한 경우 top 속성은 요소의 위치를 ​​간단히 오프셋하지만 정의 된 높이는 변경하지 않습니다.

bottom:0은 요소의 여백 상자의 아래쪽 가장자리를 포함하는 블록의 아래쪽 가장자리와 정렬합니다. (ref, demo)

초기 포함 블록, 높이 및 위치 지정 동작을 보여주기 위해 this demo을 참조하십시오.

Answer 2

놀라운 것은 무엇입니까? height: 100%은 부모 높이가 지정된 부모 높이의 100 %로 요소 높이를 설정하는 것을 의미합니다. 그런 다음 상단에서 60px로 위치를 설정하지만 요소 높이를 전혀 변경하지 않습니다. 따라서 하단 가장자리가 뷰포트 아래 60px 인 것은 당연합니다.

bottom: 0의 경우 top을 지정하면 요소의 위쪽 가장자리는 부모의 위쪽 가장자리에 상대적인 지정된 높이에 position: relative|absolute으로 배치됩니다. bottom 속성을 지정하면 요소의 아래쪽 가장자리가 부모의 지정된 높이에 position: absolute|relative으로 배치됩니다. 이 두 속성을 동시에 지정하면 요소가 늘어납니다. 이것은 실제로 요소 높이를 지정하는 꽤 일반적인 방법입니다.