¿Hay alguna manera de hacer que el ancho de un DIV secundario sea más ancho que el DIV principal usando CSS?

9 minutos de lectura

avatar de usuario
Camsoft

¿Hay alguna manera de tener un DIV secundario dentro de un contenedor DIV principal que sea más ancho que su padre? El DIV secundario debe tener el mismo ancho que la ventana gráfica del navegador.

Vea el ejemplo a continuación:
ingrese la descripción de la imagen aquí

El niño DIV deber permanecer como un hijo de la división principal. Sé que puedo establecer márgenes negativos arbitrarios en el div secundario para hacerlo más ancho, pero no puedo encontrar la manera de hacerlo esencialmente al 100% del ancho 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 el niño sea DIV. position: absolutey establezca las propiedades izquierda y derecha en 0.

El siguiente problema que tengo es que el padre tiene position: relativelo que significa que las propiedades izquierda y derecha aún son relativas al div principal y no al navegador, vea el ejemplo aquí: jsfiddle.net/v2Tja/2

no puedo quitar el position: relative del padre sin arruinar todo lo demás.

  • Sus requisitos realmente no tienen sentido. El “div secundario” debe permanecer como un elemento secundario del div principal y, sin embargo, el div principal tiene position: relative? Qué necesitas position: relative ¿por? Supongo que lo que estoy preguntando es: ¿qué estás tratando de hacer?

    – treinta puntos

    7 abr 2011 a las 21:28

  • @Camsoft ¿Viste mi comentario sobre mi respuesta? Eso funciona para mí, también revisa mi sitio web edocuments.co.uk que hace lo que estás tratando de hacer de una manera diferente

    – Blowsie

    08/04/2011 a las 14:41

  • @Camsoft además, realmente no debería haber necesidad de ningún jquery / js en su solución

    – Blowsie

    08/04/2011 a las 14:42

avatar de usuario
nils kaspersson

Aquí hay una solución genérica que mantiene el elemento secundario en el flujo del documento:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

Configuramos el width del elemento secundario para llenar todo el ancho de la ventana gráfica, luego hacemos que se encuentre con el borde de la pantalla moviéndolo hacia el left por una distancia de la mitad de la ventana gráfica, menos el 50% del ancho del elemento principal.

Manifestación:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}
<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Soporte de navegador para volvo y para calcular() generalmente se puede ver como IE9 y más reciente.

Nota: Esto supone que el modelo de caja está configurado para border-box. Sin border-boxtambién tendría que restar rellenos y bordes, lo que haría que esta solución fuera un desastre.

Nota: Se recomienda ocultar el desbordamiento horizontal de su contenedor de desplazamiento, ya que ciertos navegadores pueden optar por mostrar una barra de desplazamiento horizontal a pesar de que no haya desbordamiento.

  • Qué sabes, de hecho funciona en IE9. +1 agradable

    – Zapatos de gato

    29 de julio de 2014 a las 18:24


  • Esto era exactamente lo que estaba buscando muchas gracias. En mi opinión, esta es una mejor respuesta que la aceptada, ya que esta no interrumpe el flujo de documentos.

    – Rémi

    14 de diciembre de 2014 a las 15:11

  • VW no es bueno. Si tiene una barra de desplazamiento vertical, 100vw le dará una barra de desplazamiento horizontal.

    – Soleado

    26 de enero de 2015 a las 13:29


  • Parece que esto solo funciona un nivel más abajo. ¿Hay alguna manera de que funcione independientemente de cuántos elementos principales tenga un elemento secundario?

    – mitofechelon

    14 de agosto de 2015 a las 15:12

  • Esta es la respuesta correcta para envolver un elemento secundario más amplio en un position: relative ¡padre!

    – Hanfei Sol

    24 de septiembre de 2015 a las 4:45

avatar de usuario
mamada

Usar posicionamiento absoluto

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

  • Ok, siguiente pregunta, ¿qué sucede si el padre u otro antepasado tiene un diseño, es decir, una posición: relativa, vea: jsfiddle.net/v2Tja/2

    – Camsoft

    07/04/2011 a las 14:00


  • ¿Qué tal si otro div padre es position:static, y otro div dentro con position:relative? jsfiddle.net/blowsie/v2Tja/3

    – Blowsie

    7 abr 2011 a las 15:20

  • ¿Hay alguna manera de hacer esto, con la altura automática de .child-div y aún tener la ubicación correcta a continuación?

    – Felipe Gilberto

    02/04/2013 a las 19:28

  • y no establezca el div principal en “desbordamiento: oculto” ^^

    – chris

    5 de noviembre de 2013 a las 10:35

  • @Blowsie que tal position:fixed . ¿por qué no funciona correctamente?

    – Mostafa Ghadimi

    3 de julio de 2019 a las 12:44


He buscado por todas partes una solución a este problema durante mucho tiempo. Lo ideal sería que el hijo fuera mayor que el padre, pero sin conocer de antemano las limitaciones del padre.

Y finalmente encontré una respuesta genérica brillante aquí. Copiándolo textualmente:

La idea aquí es: empujar el contenedor hasta el 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;
}

  • Descubrí que si quiero que sea, digamos, el 90% del ancho de la ventana gráfica, puedo usar lo anterior pero establecer el ancho en 90vw. Asimismo, parece que margin-right no tiene ningún efecto en ningún caso.

    – Jason Dufair

    31/10/2017 a las 17:45

  • Tuve que cambiar los valores de margen izquierdo y derecho porque mi envoltorio es el 80% del ancho de la ventana gráfica. Entonces, en mi caso, tenía que ser margin-left:-10vw y margin-right:-10vw y luego funcionó perfectamente. ¡Gracias!

    – Timoteo0106

    12 de julio de 2019 a las 18:53

  • ¡Esta fue una respuesta brillante! Gracias.

    – culanrocks

    5 de agosto de 2019 a las 2:00

  • ¡Esta es una respuesta realmente inteligente y funciona bien!

    – Saunved Mutalik

    21 de junio de 2021 a las 14:48

avatar de usuario
asteroide

Según su sugerencia original (establecer márgenes negativos), probé y encontré 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 DIV principal. Por eso puse el padding: 0 100%; para hacer retroceder el contenido a los límites originales del Chlid DIV.

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

Aquí está el JSfiddle

He probado el de Nils Kaspersson left: calc(-50vw + 50%); funcionó perfectamente bien en Chrome y FF (todavía no estoy seguro acerca de IE) hasta que descubrí que los navegadores Safari no lo hacen correctamente. Espero que solucionen esto pronto, ya que realmente me gusta este método simple.

Esto también puede resolver su problema donde el elemento DIV principal debe ser position:relative

Los 2 inconvenientes de este método alternativo son:

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

Avíseme si encuentra algún problema con este método;). Espero eso ayude.

Caja flexible se puede usar para hacer que un niño sea más ancho que su padre con tres líneas de CSS.

Solo la del niño display, margin-left y width necesita ser configurado. margin-left depende del niño width. La fórmula es:

margin-left: calc(-.5 * var(--child-width) + 50%);

Las variables CSS se pueden utilizar para evitar calcular manualmente el margen izquierdo.

Demostración #1: Cálculo manual

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}
<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Demostración #2: Uso de variables CSS

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}
<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

avatar de usuario
fumando

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;
}

Tuve un problema similar. Se suponía que el contenido del elemento secundario permanecería en el elemento principal, mientras que el fondo tenía que extenderse por todo el ancho de la ventana gráfica.

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

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

  • Esto parece funcionar, pero hace que el navegador muestre una barra de desplazamiento horizontal ya que el ancho es de 4000 px. ¿Cuál es la solución para mantener el pseudo elemento dentro del ancho de la ventana gráfica?

    – Aarón Hudon

    10 de julio de 2014 a las 3:18

  • Por supuesto, debe configurar el cuerpo o el div de envoltura de página para overflow-x: hidden.

    – Seika85

    13/10/2014 a las 13:46

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad