制作CSS伪元素:与父div相同的高度

Question

我有一个父div必须在它的边缘有一个蓝色背景.我决定使用:在psedoeelement之前做到这一点.我将位置设置为绝对值,高度设置为100%.现在,当我将此高度设置为100%时,我相信之前的页面高度而不是它的div加上它几乎就好像这个psedoelement:之前是一个具有固定位置的div.这是一些代码

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

我怎样才能使蓝色边缘滚动,div会根据高度自动调整高度？下面这个是对的jsfiddle问题

编辑1

添加一个位置的问题:相对于editabeDiv,只要
不进行div滚动就可以工作,但只要有滚动,就不再有从该点开始的边距.您可以尝试在jsfiddle上输入一段时间来重新调整此操作.

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>