Escapar de los límites de un contenedor div

Bien, entiendo que el propósito de un DIV es contener sus elementos internos. No quería molestar a nadie diciendo lo contrario. Sin embargo, tenga en cuenta la situación siguiente:Escapar de los límites de un contenedor div

Mi página web (que solo ocupa un ancho del 70% de toda la página) está rodeada por un contenedor (un div). Sin embargo, bajo mi barra de navegación que está en la parte superior de la página, me gustaría crear w banner que ocupe el 100% del ancho de toda la página (lo que significa que tendrá que extenderse fuera de los límites de su contenedor como el el contenedor solo ocupa el 70% del ancho de la página).

Ésta es la idea básica de que estoy tratando de lograr: http://www.petersonassociates.biz/

¿Alguien tiene alguna sugerencia sobre cómo podría lograr esto? Agradecería cualquier ayuda.

Evan

Fuente

2011-10-14 Anonymous

Ese sitio en particular utiliza de la manera más fácil, que es una imagen: http://www.petersonassociates.biz/wp-content/themes/rapeterson/img/globalbg.jpg –

+1 por "No quería molestar a cualquiera " – Brent

Si he entendido bien,

style="width: 100%; position:absolute;"

debe lograr lo que vamos a ir.

Fuente

2011-10-14 01:53:10 Dennis

La forma más semánticamente correcta de hacerlo es colocar el encabezado fuera del contenedor principal, evitando el position:absolute.

Ejemplo:

<html> 
    <head> 
    <title>A title</title> 
    <style type="text/css"> 
     .main-content { 
     width: 70%; 
     margin: 0 auto; 
     } 
    </style> 
    </head> 
    <body> 
    <header><!-- Some header stuff --></header> 
    <section class="main-content"><!-- Content you already have that takes up 70% --></section> 
    <body> 
</html>

El otro método (manteniéndolo en <section class="main-content">) es como usted ha dicho, incorrecto, como un div (o sección) se supone que debe contener elementos, no tiene que se extienden fuera de los límites de su div división/sección. También enfrentarás problemas en IE (creo que cualquier cosa 7 o menos, aunque solo sea IE6 o menos) si tu div hijo se extiende fuera del div principal.

Fuente

2011-10-14 02:33:16

+1 Esto es parecido a cómo lo haría, pero puede dejar la declaración de ancho fuera de los estilos' .header' (o 'ancho: auto'). Por defecto, el elemento de nivel de bloque es tan ancho como su elemento contenedor. De esta forma, no se encontrará con problemas al agregarle margen/relleno. No diría que este es el método más "semántico", pero es menos desordenado. – Brent

Buenos puntos tanto, edité arriba para eliminar el CSS innecesario en el encabezado y usé elementos HTML5 para hacer que el código sea más semántico ... esa no era la palabra correcta, tal vez más adecuada;) –

Hay varias formas de hacerlo.

Posicionamiento absoluto
Al igual que otros han sugerido, si se le da el elemento que desea extenderse a través de las propiedades CSS de la página 100% de ancho y la posición absoluta, que tendrá una duración de todo el ancho de la página.

Sin embargo, también estará situado en la parte superior de la página, probablemente ocultando el resto del contenido, lo que no dejará espacio para su contenido actual del 100%. El posicionamiento absoluto elimina el elemento del flujo de documentos, por lo que actuará como si el contenido recién colocado no existiera. A menos que esté preparado para calcular exactamente dónde debe estar su nuevo elemento y darle cabida, esta probablemente no sea la mejor manera.

Imágenes: también puede usar una colección de imágenes para obtener lo que desee, pero buena suerte actualizándola o haciendo cambios en la altura de cualquier parte de su página, etc. Nuevamente, no es excelente para la mantenibilidad.

anidadas DIVs
Esta es la forma en que sugeriría que lo haces. Antes de que nos preocupemos por el ancho del 100%, primero te mostraremos cómo configurar el aspecto centrado al 70%.

<div class="header"> 
<div class="center"> 
    // Header content 
</div> 
</div> 
<div class="mainContent"> 
<div class="center"> 
    // Main content 
</div> 
</div> 
<div class="footer"> 
<div class="center"> 
    // Footer content 
</div> 
</div>

Con CSS como esto:

.center { 
    width: 70%; 
    margin: 0 auto; 
}

Ahora que tiene lo aparece a ser un contenedor alrededor de su contenido centrado, cuando en realidad cada fila del movimiento de los contenidos abajo de la página se compone de un contenido div, con una clase semántica y descriptiva (como header, mainContent, etc.), con una clase "center" dentro de él.

con lo establecido arriba, haciendo la cabecera parece que "romper el contenedor div" es tan fácil como:

.header { 
    background-color: navy; 
}

Y el color llega a los bordes de la página. Si por alguna razón desea que el contenido sí de extenderse a través de la página, usted podría hacer:

.header .center { 
    width: auto; 
}

Y ese estilo podría obligar un estilo de .center, y hacer que el contenido de la cabecera se extiende a los bordes de la página .

¡Buena suerte!

Fuente

2011-10-14 03:18:56 rhodesjason

Si solo desea que el fondo del elemento se extienda por toda la página, esto también se puede lograr con márgenes negativos.

En pocas palabras (corrección de comentario):

.bleed { 
padding-left: 3000px; 
margin-left: -3000px; 
padding-right: 3000px; 
margin-right: -3000px; 
}

Eso le da barras de desplazamiento horizontal, que se quita con:

body {overflow-x: hidden; }

Hay una guía en http://www.sitepoint.com/css-extend-full-width-bars/. Podría ser más semántico hacer esto con los elementos de psuedo: http://css-tricks.com/full-browser-width-bars/

Fuente

2013-10-31 22:11:32 Mark

el 100% no lo hizo trabajo, pero 3000px sí, gracias – max4ever

¡Impresionante! Usé esta solución (menos el desbordamiento: oculto) en un sitio de Thrive Themes WordPress para superar algunos estilos tontos que preestablecieron y funcionó como un amuleto. –

Esta debería ser la respuesta aceptada, ya que la posición: absoluta; fix elimina el elemento del cuerpo del flujo, lo que requiere un marcado adicional en otros elementos para garantizar que dichos elementos no se solapen con el código de ancho completo. – Adam

Supongo que todas las soluciones están desactualizadas.

La mejor manera de escapar de los límites de un elemento es mediante la adición:

margin-left: calc(~"-50vw + 50%"); 
    margin-right: calc(~"-50vw + 50%");

discusión se puede encontrar here y here. También hay una buena solución para el próximo grid-layouts.

Fuente

2017-09-18 15:11:04

Este comentario fue súper útil. Estaba tratando de encontrar una buena solución para salir del contenedor de diseño de cuadrícula CSS Materialise y esto lo hizo el truco – CDerrig

Escapar de los límites de un contenedor div

Respuesta

Cuestiones relacionadas