Crea un elemento largo come i nonni

Ho il seguente markup in cui #content è largo all’80% e contiene elementi .slide . Voglio che le diapositive siano larghe quanto i loro nonni (cioè il corpo in questo esempio). Questo è il markup che ho e non può essere modificato :

 body { margin: 0; font: medium monospace; background: lightgray; } #content { margin: auto; width: 80%; background: white; } #content:before, #content:after { content: ""; display: table; } .slide { height: 6em; background: indianred; }

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Phasellus euismod dolor imperdiet!
 
 Donec mauris tellus
 Pellentesque sit amet venenatis diam, at interdum tortor.
  Quisque ornare mi in pharetra porttitor.
 Nulla ultrices quam nec vehicula porta.

Ho provato:

posizionamento relativo-assoluto che richiede l’altezza delle diapositive da fissare (le diapositive contengono testo di lunghezza variabile)
imposta l’80% di larghezza sui paragrafi anziché sul contenuto, ma non è elegante (il contenuto contiene elementi che non possono avere margini dell’80% di larghezza o del 10% di margine sinistro)

Se il contenuto circostante può richiedere una combinazione diversa di proprietà di posizionamento per conto proprio, si può sempre andare con il seguente.

 body { margin: 0; font: medium monospace; background: lightgray; } #content { margin: auto; width: 80%; background: white; } #content:before, #content:after { content: ""; display: table; } .slide { height: 6em; background: indianred; width: 125%; /*100*(100/80)*/ margin-left: 50%; transform: translateX(-50%); }

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Donec mauris tellus
 Pellentesque sit amet venenatis diam, at interdum tortor.

A seconda del supporto del browser richiesto, questo è abbastanza semplice o richiede alcuni CSS complicati.

Una versione semplice utilizza il vw ( viewport width unit ) che ha un supporto decente e richiede alcune semplici modifiche alla configurazione:

 body { margin: 0; font: medium monospace; background: lightgray; } #content { margin: auto; width: 80vw; background: white; } #content:before, #content:after { content: ""; display: table; } .slide { width: 100vw; height: 6em; margin-left: -10vw; background: indianred; }

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Donec mauris tellus
 Pellentesque sit amet venenatis diam, at interdum tortor.

È ansible utilizzare margini negativi con padding corrispondente + box-sizing:border-box

VIOLINO

 body { margin: 0; font: medium monospace; background: lightgray; } #content { margin: auto; width: 80%; background: white; } #content:before, #content:after { content: ""; display: table; } .slide { height: 6em; background: indianred; margin: 0 -12.5%; /* 20% of body = 25% of 80% content... so 12.5% on each side */ padding: 0 12.5%; box-sizing: border-box; }

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Phasellus euismod dolor imperdiet!
 
 Donec mauris tellus
 Pellentesque sit amet venenatis diam, at interdum tortor.
  Quisque ornare mi in pharetra porttitor.
 Nulla ultrices quam nec vehicula porta.

Puoi provare questo:

 .slide { height: 6em; background: indianred; width: 100vw; margin-left: 50%; transform: translateX(-50%); }

JSFiddle Demo

Prova a usare questo:

 body { margin: 0; font: medium monospace; background: lightgray; overflow: hidden; } #content { margin: auto; width: 80%; background: white; } #content:before, #content:after { content: ""; display: table; } .slide { height: 6em; background: indianred; width: 100vw; transform: translateX(-10%); }

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Phasellus euismod dolor imperdiet!
 
 Donec mauris tellus
 Pellentesque sit amet venenatis diam, at interdum tortor.
  Quisque ornare mi in pharetra porttitor.
 Nulla ultrices quam nec vehicula porta.

Usa questo invece. Ecco un violino

HTML

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 Donec mauris tellus
  Pellentesque sit amet venenatis diam, at interdum tortor.

Il CSS

 body { margin: 0; font: medium monospace; background: lightgray; } .content { margin: auto; width: 80%; background: white; } .content:before, .content:after { content: ""; display: table; } .slide { height: 6em; background: indianred; }