css - 绝对 div 标签高度未与父 div 对齐

Question

我正在创建一个编辑器，它应该在左侧有一个行号栏(装订线)。 我设置了一个高度为 100% 的 div 和父 div overflow : auto。

我在这里假设，如果内容超过给定的高度，editor-body 应该得到一个滚动条，并且 gutter bar 高度应该(增加到)和 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%; ，绝对元素不会比那些100%的高度高你使用高度或坐标来调整它的大小。

您应该让 .wrapper 滚动以查看装订线接受坐标。 http://jsfiddle.net/d9pDh/2/