Make CSS pseudoelement :after same height as parent div

Question

I have a parent div has to have a blue background on the margin of it. I have decided to use the :before psedoeelement to do that. I have set the position to be absolute and height to 100%. Now when I set the height of this to be 100%, I believe the the before is taking height of the page and not its div plus it almost seems as if the this psedoelement :before is a div that has position of fixed. Here is some code

<div contenteditable="true" class="editableDiv" style="heigth: 100px;">
<p><b>test </b><p>

  </p>
</div>

CSS

.editableDiv{
  background-color: #DEDEDE;

  min-height: 100px;
  max-height: 400px;
  overflow:scroll;
}
.editableDiv p{
    padding: 0px 0px 0px 43px;
}

.editableDiv:before{
 background-color:blue; 
 content: " ";
 position:absolute; 
 float:left;
 height: 100%;
 width: 40px;
 display:block;
}

How can I make it so the blue margin is scrolls with the div automatically adjusts height according to the height? Here this is the JSFiddle for the problem

Edit 1

The problem with adding just a position:relative to editabeDiv is that it works for as long as
don't make the div scroll but as soon as there is a scroll there is no longer a margin from that point onwards. You can try hitting enter for a while on jsfiddle to recreat this.

Answer 1

Here is a second answer without an additional DIV. It's similar to your original code and uses a :before pseudo-element. No float, but position absolute in relation to a relative positioned element, which makes the 100% height setting work (in conjunction with height settings on the main element).

http://codepen.io/anon/pen/PzYwRw

<div contenteditable="true" class="editableDiv" style="heigth: 100px;">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </p>
</div>

 

editableDiv {
  position: relative;
  background-color: #DEDEDE;
  min-height: 100px;
  max-height: 400px;
  overflow: scroll;
}

.editableDiv p {
  padding: 0px 0px 0px 45px;
}

.editableDiv:before {
  content: ' ';
  position: absolute;
  width: 40px;
  height: 100%;
  z-index: 1;
  background: #00f;
  background-size: 40px 100px;
  background-repeat: no-repeat;
}

Answer 2

Your code works as expected: the blue pseudo-element covers all the editable element vertically.

The problem is that the contents of the editable div overflow it, and it seems you want the blue element to be as tall as the contents, not the editable element.

To achieve that, you should add another element.

.editableDiv-wrapper {
  max-height: 400px;
  overflow: scroll;
}
.editableDiv {
  background-color: #DEDEDE;
  position: relative;
  min-height: 100px;
  overflow: hidden; /* Prevent margin collapse */
}
.editableDiv p {
  padding: 0px 0px 0px 43px;
}
.editableDiv:before {
  content: " ";
  position: absolute;
  height: 100%;
  width: 40px;
  background-color: blue;
}

<div class="editableDiv-wrapper">
  <div contenteditable="true" class="editableDiv" style="heigth: 100px;">
    <p><b>test</b></p>
  </div>
</div>
<hr />
<div class="editableDiv-wrapper">
  <div contenteditable="true" class="editableDiv" style="heigth: 100px;">
    <p><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b><br /><b>test</b></p>
  </div>
</div>

Answer 3

define the margin as an own div with position: absolute and height: 100%;, followed by the p tag/s. .editableDiv needs a height definition for the 100% to work. .editableDiv or (as in my codepen) the p tags inside it get a left padding that lets the text start right of the margin.

http://codepen.io/anon/pen/yJByMg

<div contenteditable="true" class="editableDiv" style="heigth: 100px;">
  <div class="bluemargin"></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </p>
</div>


.editableDiv{
  position: relative;
  background-color: #DEDEDE;
  min-height: 100px;
  max-height: 400px;
  overflow:scroll;
}
.editableDiv p {
    padding: 0px 0px 0px 45px;
}

.bluemargin {
  position: absolute;
  background-color: #00f;
  width: 40px;
  height: 100%;
}