style - html y css pdf

¿Hay alguna manera de hacer que el ancho de un DIV de un niño sea más ancho que el DIV padre usando CSS?

Question

¿Hay alguna manera de tener un DIV hijo dentro de un DIV contenedor de padres que sea más amplio que su padre o madre? El DIV hijo debe ser del mismo ancho que la ventana del navegador.

Vea el siguiente ejemplo:

El DIV hijo debe permanecer como hijo del div principal. Sé que puedo establecer márgenes negativos arbitrarios en el div infantil para hacerlo más amplio, pero no puedo encontrar la forma de hacerlo esencialmente con un ancho del 100% del navegador.

Sé que puedo hacerlo:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

Pero necesito que el niño tenga el mismo ancho que el navegador, que es dinámico.

Actualizar

Gracias por sus respuestas, parece que la respuesta más cercana hasta ahora es hacer que la posición DIV secundaria: absoluta, y establecer las propiedades izquierda y derecha en 0.

El siguiente problema que tengo es que el padre tiene posición: relativo, lo que significa que las propiedades izquierda y derecha siguen siendo relativas al div principal y no al navegador, vea el ejemplo aquí: jsfiddle.net/v2Tja/2

No puedo quitar la posición relativa del padre sin atornillar todo lo demás.

Answer 1

Una solución más moderna a esta pregunta es usar la unidad de ventana vw y calc() .

Establezca el width del elemento secundario al 100% del ancho de la ventana 100vw , o 100vw . A continuación, mueva el elemento secundario 50% del ancho de la ventana gráfica, menos el 50% del ancho del elemento principal , hacia la izquierda para que coincida con el borde de la pantalla.

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 50px;
    background: blue;
}

<div class=''parent''>
    parent element
    <div class=''child-element''>child-element</div>
</div>

Aquí hay una demostración .

El soporte del navegador para vw y para calc() generalmente se puede ver como IE9 +.

Nota: Esto supone que el modelo de caja está configurado en border-box . Sin border-box , también tendrás que restar paddings y bordes, haciendo que esta solución sea un desastre.

Answer 2

Añadiendo a la solución de Nils Kaspersson, estoy resolviendo el ancho de la barra de desplazamiento vertical también. Estoy usando 16px como ejemplo, que se resta del ancho del puerto de visualización. Esto evitará que aparezca la barra de desplazamiento horizontal.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Answer 3

En función de su sugerencia original de sugerencia (establecer márgenes negativos), he intentado y he encontrado un método similar usando unidades de porcentaje para el ancho dinámico del navegador:

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

Los márgenes negativos permitirán que el contenido fluya fuera del Parent DIV. Por lo tanto, configuré el padding: 0 100%; para llevar el contenido a los límites originales de Chlid DIV.

Los márgenes negativos también harán que el ancho total de .child-div se expanda fuera de la ventana del navegador, lo que dará como resultado un desplazamiento horizontal. Por lo tanto, tenemos que recortar el ancho de extrusión aplicando un overflow-x: hidden a un abuelo DIV (que es el padre de la Div Parent):

Aquí está el JSfiddle

Probé con la left: calc(-50vw + 50%) Nils Kaspersson left: calc(-50vw + 50%) ; Funcionó perfectamente bien en Chrome & FF (no estoy seguro de IE todavía) hasta que descubrí que los navegadores Safari no lo hacen correctamente. Espero que hayan solucionado esto pronto, ya que me gusta este método simple.

Esto también puede resolver su problema donde el elemento Parent DIV debe estar en position:relative

Los 2 inconvenientes de este método alternativo son:

• Requerir marcado adicional (es decir, un elemento de abuelos (al igual que el método de alineación vertical de la buena mesa no es ...)
• Los bordes izquierdo y derecho de Child DIV nunca se mostrarán, simplemente porque están fuera de la ventana del navegador.

Por favor, avíseme si hay algún problema que encuentre con este método;). Espero eso ayude.

Answer 4

He buscado por todas partes una solución a este problema durante mucho tiempo. Lo ideal es que el niño sea mayor que el padre, pero sin conocer las limitaciones del padre con anticipación.

Y finalmente encontré una brillante respuesta genérica here . Copiando palabra por palabra:

La idea aquí es: empujar el contenedor al centro exacto de la ventana del navegador con la izquierda: 50%; luego, tirar de él hacia el borde izquierdo con un margen negativo de -50vw.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Answer 5

Sé que esto es viejo, pero para cualquiera que venga a esto por una respuesta, lo haría así:

Desbordamiento oculto en un elemento que contiene el elemento principal, como el cuerpo.

Dele a su hijo elemento un ancho mucho más ancho que su página, y colóquelo con un valor absoluto de -100%.

Aquí hay un ejemplo:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

También aquí hay un JS Fiddle: http://jsfiddle.net/v2Tja/288/

Answer 6

Tuve un problema similar. Se suponía que el contenido del elemento hijo debía permanecer en el elemento principal mientras que el fondo tenía que ampliar el ancho completo de la ventana gráfica.

Resolví este problema haciendo que la position: relative elemento hijo position: relative y agregando un pseudo elemento ( :before ) a ella con position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px; position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px; . El pseudo elemento se queda detrás del niño real como un elemento de pseudo fondo. Esto funciona en todos los navegadores (incluso IE8 + y Safari 6+ - no tienen la posibilidad de probar versiones anteriores).

Pequeño ejemplo de violín: http://jsfiddle.net/vccv39j9/

Answer 7

Usé esto:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

Answer 8

Usa posicionamiento absoluto

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Answer 9

puedes probar la posición: absoluta. y da ancho y alto, arriba: ''eje y desde la parte superior'' e izquierda: ''eje x''

Answer 10

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}