制作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会根据高度自动调整高度？这里this是问题的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>

Answer 2

这是没有额外DIV的第二个答案。它与您的原始代码类似，并使用re.compile(u'[^a-ząćęłóńśżź]+') 伪元素。没有浮动，但相对于相对定位元素的位置是绝对的，这使得100％高度设置起作用（与主元素的高度设置一起）。

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

:before

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

Answer 3

使用position: absolute和height: 100%;将边距定义为自己的div，然后是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%;
}