让CSS伪元素：相同的高度父DIV后

Question

我有一个父div有有在它的利润率蓝色背景。我已经决定使用：psedoeelement这样做之前。我已经设定为绝对位置和高度为100％。现在，当我设定的这个高度是100％，我相信页面的前服用的高度，而不是其格，再加上它几乎好像在此psedoelement：之前是有固定位置的股利。下面是一些代码

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

我怎样才能使它所以蓝色的保证金是用滚动股利根据高度自动调整高度？这里this是的jsfiddle的问题

编辑1

与添加只是一个位置的问题：相对于editabeDiv的是，它的工作原理，只要 不要让DIV滚动，但只要有一个滚动不再有从该点起的余量。你可以试着打了一会就进入到的jsfiddle这recreat。

Answer 1

您的代码按预期工作：蓝色伪元素垂直覆盖了所有的编辑元素。

问题是可编辑的div溢出它的内容，它似乎你想要的蓝色元素是为内容，而不是编辑元素一样高。

为了实现这一目标，你应该添加其他元素。

.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 2

这里是没有额外的DIV第二个答案。它类似于原来的代码，并使用一个:before伪元素。没有浮动，但位置相对于绝对到的相对定位的元素，这使得100％的高度设定的工作（与主元件上高度设置结合）。

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 3

定义裕度作为自己的分度position: absolute和height: 100%;，接着p标签/秒。 .editableDiv需要为100％工作的高度定义。 .editableDiv或（在我codepen）里面的p标签获得左填充，让文字开始的保证金权。

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