ejemplos - html style attribute

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

Question

Supongamos que tengo el siguiente código HTML:

<div id="container" style="width: 960px">
<div id="help_panel" style="width: 100%; margin: 0 auto;">
Content goes here.
</div>
</div>

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!

Answer 1

............... en formato HTML

<div id="a">Full Width</div>

............... En formato CSS

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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)

<div id="container" style="width: 960px; border:1px solid #f00;">
Text before<br>
<div id="help_panel" style="width: 100%; position:absolute; margin: 0 auto; border:1px solid #0f0;">
Content goes here.
</div>
This is behind the help_penal
</div>

Answer 6

Puede usar 100vw (ancho de ventana 100vw ). 100vw significa el 100% de la ventana 100vw . vw es http://caniuse.com/#feat=viewport-units .

<div id="container" style="width: 960px">
<div id="help_panel" style="width: 100vw; margin: 0 auto;">
Content goes here.
</div>
</div>

Answer 7

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

Answer 8

Sí, se puede hacer. Tienes que usar

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

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

Answer 9

Simplemente ajuste el ancho a 100vw como este:

<div id="container" style="width: 100vw">
<div id="help_panel" style="width: 100%; margin: 0 auto;">
Content goes here.
</div>
</div>

Answer 10

Tu puedes hacer:

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

Answer 11

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.