Question

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

我在这里假设，如果内容超过给定的高度，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%;，如果您使用height或coordonate来设置它，那么绝对元素将不会高于那些100％的高度。

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

Answer 2

将.gutter作为.content的孩子：

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;
}

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

2 个答案: