부모의 오버플로를 채우기 위해 하위 요소를 설정하는 방법 : 스크롤 높이?

Question

제가 이야기의 코드는 jsfiddle에 여기에 있습니다 : 다음 CSS를 들어 http://jsfiddle.net/U6PX2/1/

:

.contentbox { 
    margin-top: 100px; 
    height: 200px; 
    overflow-y: scroll; 
    position: relative; 
} 

.vline { 
    position: absolute; 
    border-right: 2px solid #beeeef; 
    height: 100%; 
    left: 50%; 
} 

.message { 
    position: relative; 
    background-color: #ddd; 
    font-size: 20px; 
    margin: 20px; 
} 

그리고 HTML

<div class="contentbox"> 
    <div class="vline"></div> 
    <div class="message"> 
     The blue line should go all the way down 
    </div> 
    <div class="message"> 
     But it only displays on the visible portions 
    </div> 
    <div class="message"> 
     And doesn't extend to the overflow: scroll areas 
    </div> 
    <div class="message"> 
     Booga booga booga 
    </div> 
    <div class="message"> 
     Booga booga booga 
    </div> 
    <div class="message"> 
     Booga booga booga 
    </div> 
</div> 

내가 스크롤 사업부가 있습니다. 스크롤 할 때마다 세로선을 표시하고 싶습니다.

height: 100%은 상위 요소의 높이를 사용하며 오버플로가 발생하여 콘텐츠의 높이와 일치하지 않습니다.

어떻게 수직선을 확장 할 수 있습니까?

Answer 1

당신은 그럼 당신은 position:fixed를 사용하여 가시 영역과 동일한 높이를 넣을 수 있습니다

는 스크롤 볼 전체 시간으로 볼 수직 라인으로합니다. 이

.vline { 
    position: fixed; 
    border-right: 2px solid #beeeef; 
    height: 200px; 
    left: 50%; 
} 

Js Fiddle Demo

Answer 2

처럼 나는 position:fixed 아마 최고의 답변입니다 동의합니다. 그러나 이것은 :before 클래스를 사용하고 HTML을 약간 정리하는 좋은 경우입니다.

HTML :

<div class="contentbox"> 
//content 
</div> 

CSS : 나는 어느 정도의 혈족이 문제에 직면

.contentbox:before { 
    content: ""; 
    position: fixed; 
    left: 50%; 
    top:100px 
    height: inherit; 
    border-right: 2px solid #beeeef; 
} 

Answer 3

설정 가끔은 당신이 필요로하는 바로 그 때, 좋은 생각이 아니다 어쨌든 다 했지 해결할 수있는 고정 부모 컨테이너의 위치를 ​​변경하려면 그 사이에이 청색 선의 위치를 ​​수정해야 함을 의미합니다.

배경을 사용할 수 있습니다. 파란색 선을 이미지 하나의 픽셀로 만들고 y 축에서 반복하십시오. 배경 위치를 사용하여 위치를 조정하십시오.