CSS: Machen Sie innere div 100% Körperbreite ohne Verwendung der Position: absolut - ist das möglich?

Question

Lässt annehmen, dass ich aus irgendeinem Grund den HTML-Code nicht ändern kann und JavasScript nicht verwenden kann. Nehmen wir an, die Position #content_actual hängt von der Höhe #element ab. #element hat eine flexible Höhe.

Gibt es eine Lösung für dieses Problem?

HTML:

<div id="content"> 
    <div id="element">ABCDE</div> 
    <div id="content_actual">FGHIJ</div> 
</div> 

CSS:

#content { 
    width:960px; 
    margin: 0 auto; 
} 

#element { 
// width: 100% of body width 
// position: everything but position absolute or fixed 
} 

Answer 1

Eine Kombination der relativen Positionierung, Darstellungseinheiten und calc.

Codepen Demo

HINWEIS: diese bricht, sobald das Ansichtsfenster kleiner als die Behälterbreite ist. Medienabfragen wären an diesem Punkt erforderlich.

#content { 
 
    width: 480px; /* numbers changed for this Snippet */ 
 
    margin: 0 auto; 
 
    background: green; 
 
    padding: 50px; 
 
} 
 
#element { 
 
    height: 50px; 
 
    line-height: 50px; 
 
    width: 100vw; 
 
    position: relative; 
 
    right: calc(50vw - 240px); /* second value 50% of container width */ 
 
    background: lightblue; 
 
}

<div id="content"> 
 
    <div id="element">ABCDE</div> 
 
    <div id="content_actual">FGHIJ</div> 
 
</div>

Es sollte auch, dass der Behälter nicht overflow:hidden beachtet werden, für diese Technik zu arbeiten haben.

Answer 2

Ähnlich wie bei Paulie_D (anscheinend haben wir Brainwaves geteilt), aber dies verwendet Prozentsatz, um die Containerbreite zu kontern. Keine Ahnung, wie gut unterstützt sein würde:

https://jsfiddle.net/7w2cwqfq/4/

<div id="content"> 
    <div id="element">ABCDE</div> 
    <div id="content_actual">FGHIJ</div> 
</div> 

#content { 
width:200px; 
margin: 0 auto; 
background: yellow; 
} 

#element { 
    position: relative; 
    left: calc(-50vw + 50%); 
    width: 100vw; 
    background: red 
}