I am currently designing an editor that requires a line-number bar (gutter) on the left side. I have set a div with a height of 100% and its parent div with overflow: auto.
My expectation is that if the content exceeds the given height, the editor-body should display a scroll bar and the gutter bar's height should adjust accordingly.
However, this is not working as expected. You can view the issue in this fiddle
<div class="wrapper">
<div class="body">
<div class="gutter"></div>
<div class="content" contenteditable=true>
Enter some text here to see the scroll bar appear...
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>