절대 div 태그 높이가 부모 div에 맞춰지지 않았습니다.

Question

편집기 왼쪽에 줄 번호 표시 줄 (거터)이 있어야합니다. 높이가 100 %이고 부모 div가 overflow : auto 인 div를 설정했습니다.

콘텐츠가 지정된 높이를 초과하면 editor-body에 스크롤 막대가 표시되고 거터 막대 높이는 몸체 높이만큼 높아야한다고 가정합니다. 여기

하지만 일이되지 ... fiddle

<div class="wrapper"> 
     <div class="body"> 
     <div class="gutter"></div> 
     <div class="content" contenteditable=true> 
      Enter some thing here upto getting scroll.. 
      more data..<br/> 
      more data..<br/> 
      more data..<br/> 
       more data..<br/> 
       more data..<br/> 
       more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> 
     </div> 
     </div> 
    </div> 

<style type="text/css"> 
    .wrapper{ 
    width:400px; 
    height:250px; 
    border:1px solid #757575; 
    } 
    .body{ 
    width:100%; 
    height:100%; 
    overflow:auto; 
    position:relative; 
    padding-left:22px; 
    } 
    .gutter{ 
    position:absolute; 
    left:0px; 
    width:20px; 
    height:100%; 
    background:#e5e5e5; 
    border-right:1px solid #757575; 
    } 
    .content{ 
    width:380px;; 
    height:100%; 
    } 
</style> 

Answer 1

당신이 relative + overflow + height:100%;을 설정하면 높이를 사용하거나 coordonate 경우 절대 요소는 그 100 % 높이보다 키가되지 않습니다 크기.

거터 접수 좌표를 보려면 .wrapper을 스크롤해야합니다.

Answer 2

http://jsfiddle.net/d9pDh/2/는 .content의 자식으로 .gutter을 넣어 :

http://jsfiddle.net/d9pDh/6/

<div class="content" contenteditable=true> 
    <div class="gutter"></div> 
    Enter some thing here upto getting scroll.. 
... etc 

CSS

.gutter{ 
    position:absolute; 
    right:100%; 
    width:20px; 
    min-height:100%; 
    background:#e5e5e5; 
    border-right:1px solid #757575; 
} 
.content{ 
    width:380px; 
    min-height:100%; 
    position:relative; 
}