は、CSSのpseudoelementを行います。親のdiv

Question

と同じ高さの後に私は、親のdivはそれのマージンに青い背景を持っている必要があります。私はそれを行うためにpsedoeelementの前に：を使用することに決めました。絶対と高さを100％に設定しました。前の固定の位置を持っているdivがある：私は100％とし、この高さを設定すると今、私は前のページの高さを取り、ないそのdivのプラスそれはほとんどこの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; 
} 

は、どのように私はそれがとても青いマージンが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

pタグ/ S続いposition: absoluteとheight: 100%;と自身のdivとしてマージンを定義します。 .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%; 
} 

Answer 3

追加DIVことなく、第2の答えです。それはあなたの元のコードに類似だと:before擬似要素を使用しています。浮動小数点はありませんが、100％の高さの設定を行う相対配置要素との相対的な位置を指定します（主要素の高さ設定と組み合わせて）。 RokoC.Buljan @

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