余裕を持たない親にDivを拡張する

Question

親の親と同じ幅になるようにdivを拡張したいと思います。したがって、このようなHTML構造で：

<div class="pp"> 
    <div class="p"> 
    <p> 
    Some text 
    </p> 
    <div class="c"> 
     This is the thingy! 
    </div> 
    <p> 
    Some more text 
    </p> 
    </div> 
</div> 

私はdiv.ppの国境に拡張するdiv.cをしたいと思います。

これは負のマージンで可能ですが、私の状況では、あらかじめdiv.ppのマージンを認識していません。私はこれを行うためのJavaScriptを書くことができたことを知っていますが、私はCSSのみのソリューションに興味があります。また、HTMLの構造を変更することでこの問題を解決できることも認識していますが、これもオプションではありません。

https://jsfiddle.net/y37mLkzu/1/

が負のマージンでこれを固定する例があります：ここでは

はHTMLといくつかの有用なCSSを示すフィドルです。

Answer 1

これがあなたの状況ではうまくいくかどうかはわかりませんが、固定マイナスマージンを使用せず純粋なCSSのみを使用している唯一の方法です。私は:beforeと:after~.cを追加し、.c要素のいずれかの側に絶対配置しました。また、余分な絶対配置要素を切り取るために、オーバーフロー隠しを.ppラッパーに追加しました。

p { 
 
    margin:0; 
 
} 
 
.pp { 
 
    padding: 0 6px 0 6px; 
 
    width: 100px; 
 
    background-color: black; 
 
    overflow: hidden; 
 
} 
 
.p { 
 
    background-color:white; 
 
} 
 
.c { 
 
    background-color:red; 
 
    position: relative; 
 
} 
 
.c:before, .c:after { 
 
    content:""; 
 
    position: absolute; 
 
    top:0; 
 
    background: red; 
 
    height:100%; 
 
    width:100%; 
 
} 
 
.c:before { 
 
    left:-100%; 
 
} 
 
.c:after { 
 
    right:-100%; 
 
}

<div class="pp"> 
 
    <div class="p"> 
 
    <p> 
 
    Some text 
 
    </p> 
 
    <div class="c"> 
 
     This is the thingy! 
 
    </div> 
 
    <p> 
 
    Some more text 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

あなたはポジションを使用しますか？ちょうど興味があることを知っている。 position:absoluteを使用しても動作します。