Haga que el div infantil se estire en el ancho de la página

Supongamos que tengo el siguiente código HTML:

Content goes here.

Si quiero que el help_panel div se extienda por el ancho de la página / broswer, incluso si el ancho de la página / navegador es más ancho que 960px (que es el ancho establecido para el contenedor div), ¿es posible hacerlo con el por encima de la estructura? Quiero que el panel de ayuda div se expanda más allá de los límites de ancho establecidos en el contenedor div si la página es más ancha que 960px.

Tengo curiosidad si esto se puede lograr con la estructura anterior. ¿O tendré que colocar el div de help_panel fuera del contenedor div para que funcione?

¡Gracias!

Sí, se puede hacer. Tienes que usar

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

Ver ejemplo de trabajo en http://jsfiddle.net/bJbgJ/3/

Con los navegadores actuales (esta pregunta data un poco ahora), puede usar la unidad vw (ancho de viewport) mucho más simple:

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

(datos de uso: http://caniuse.com/#feat=viewport-units )

Según mis pruebas, esto no debe interrumpir tu flujo mientras es fácil de usar.

Podrías hacerlo con jQuery …

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

De lo contrario, en lo que se refiere a css, estoy bastante seguro de que tendrías que sentar el div del help_panel en la parte exterior del container utilizando la position:absolute estilo position:absolute : http://css-tricks.com/forums/discussion/2318/give- child-div-width% 3A100-of-page-width-inside-parent. / p1

Sí, puede, establecer la position: relative para el contenedor y la position: absolute para el panel de ayuda

puede sacarlo del flujo estableciendo la position:absolute , pero tendrá que lidiar con diferentes problemas de visualización. O puede establecer explícitamente el ancho a> 960.

Podrías sacarlo del flujo con la posición: absoluta. Pero el helper_panel se alineará con otras cosas. (Agregué órdenes, para ver los divs)

 
Text before
Content goes here.
This is behind the help_penal

Simplemente ajuste el ancho a 100vw como este:

 
Content goes here.

Puede usar 100vw (ancho de ventana 100vw ). 100vw significa el 100% de la ventana 100vw . vw es compatible con todos los principales navegadores, incluido IE9 + .

 
Content goes here.

Desde la position: absolute; y el ancho de la ventana gráfica no tenía opciones en mi caso especial, hay otra solución rápida para resolver el problema. La única condición es que el desbordamiento en la dirección x no es necesario para su sitio web.

Puede definir márgenes negativos para su elemento:

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

Pero dado que tenemos un desbordamiento al hacer esto, debemos evitar el desbordamiento en la dirección x globalmente, por ejemplo, para el cuerpo:

 body { overflow-x: hidden; } 

Puede configurar el padding para elegir el tamaño de su contenido.

Tenga en cuenta que esta solución no proporciona un ancho del 100% para el contenido, pero es útil en casos en los que necesita, por ejemplo, un color de fondo que tenga un ancho total y un contenido que siga dependiendo del contenedor.

…………… en formato HTML

 
Full Width

…………… En formato CSS

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

Tu puedes hacer:

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