Fai div bambino si estende su larghezza della pagina

Supponiamo di avere il seguente codice HTML:

Content goes here.

Se voglio che il div help_panel si estenda lungo la larghezza della pagina / broswer, anche se la larghezza della pagina / browser è più ampia di 960px (che è la larghezza impostata per il contenitore div), è ansible farlo con il sopra la struttura? Voglio che il pannello di aiuto div diventi oltre i limiti di larghezza impostati nel contenitore div se la pagina è più larga di 960px.

Sono curioso di sapere se questo può essere realizzato con la struttura di cui sopra. O dovrò mettere l’help_panel div al di fuori del contenitore div per farlo funzionare?

Grazie!

Sì, si può fare. Devi usare

 position:absolute; left:0; right:0; 

Guarda l’esempio di lavoro su http://jsfiddle.net/bJbgJ/3/

Con i browser correnti (questa domanda è un po ‘datata), puoi usare l’unità molto più semplice di vw (viewport width):

 #help_panel { margin-left: calc(50% - 50vw); width: 100vw; } 

(dati di utilizzo: http://caniuse.com/#feat=viewport-units )

Dai miei test, questo non dovrebbe interrompere il stream pur essendo facile da usare.

Puoi farlo con jQuery …

 $("#help_panel").width($(window).width()); 

Altrimenti, per quanto riguarda i css, sono abbastanza sicuro che dovresti mettere il div help_panel all’esterno del container usando position:absolute styling: http://css-tricks.com/forums/discussion/2318/give- child-div-width% pagina 3A100-di-larghezza-dentro-genitore. / p1

Sì, è ansible, impostare la position: relative per il contenitore e la position: absolute per help_panel

puoi estrarlo dal stream impostando la position:absolute su di esso, ma avrai diversi problemi di visualizzazione da affrontare. Oppure puoi impostare esplicitamente la larghezza su> 960.

Potresti toglierlo dal stream con la posizione: assoluto. Ma helper_panel si sovrapporrà ad altre cose. (Ho aggiunto ordini, per vedere i div)

 
Text before
Content goes here.
This is behind the help_penal

Basta impostare la larghezza a 100vw in questo modo:

 
Content goes here.

Puoi usare 100vw (larghezza della finestra). 100vw significa il 100% del viewport. vw è supportato da tutti i principali browser, incluso IE9 + .

 
Content goes here.

Poiché position: absolute; e la larghezza della vista non erano opzioni nel mio caso particolare, c’è un’altra soluzione rapida per risolvere il problema. L’unica condizione è che l’overflow in x-direction non è necessario per il tuo sito web.

Puoi definire i margini negativi per il tuo elemento:

 #help_panel { margin-left: -9999px; margin-right: -9999px; } 

Ma dal momento che otteniamo un overflow, dobbiamo evitare l’overflow in direzione x a livello globale, ad es. Per il corpo:

 body { overflow-x: hidden; } 

È ansible impostare il padding per scegliere la dimensione del contenuto.

Si noti che questa soluzione non offre una larghezza del 100% per il contenuto, ma è utile nei casi in cui è necessario, ad esempio, un colore di sfondo che ha una larghezza completa con un contenuto che dipende ancora dal contenitore.

…………… In formato HTML

 
Full Width

…………… In formato CSS

 #a { background-color: green;width: 100%;height: 80px;border: 1px solid;margin: 0 auto;} body { padding: 0;margin: 0} 

Tu puoi fare:

 margin-left: -50%; margin-right: -50%;