Scappare i limiti di un contenitore div

Va bene, ho capito che lo scopo di un DIV è quello di contenere i suoi elementi interni - Non volevo sconvolgere nessuno dicendo diversamente. Tuttavia, considerare il seguente scenario:Scappare i limiti di un contenitore div

La mia pagina Web (che occupa solo il 70% della larghezza dell'intera pagina) è circondata da un contenitore (un div). Tuttavia, sotto la barra di navigazione che si trova nella parte superiore della pagina, vorrei creare un banner w che occupi il 100% della larghezza dell'intera pagina (il che significa che dovrà estendersi oltre i limiti del suo contenitore come contenitore occupa solo il 70% della larghezza della pagina).

Questa è l'idea di base che sto cercando di realizzare: http://www.petersonassociates.biz/

Qualcuno ha qualche suggerimento per come potrei fare questo? Apprezzerei qualsiasi aiuto.

Evan

fonte

2011-10-14 Anonymous

Quel particolare sito utilizza il modo più semplice, che è un'immagine: http://www.petersonassociates.biz/wp-content/themes/rapeterson/img/globalbg.jpg –

+1 per "Non volevo per sconvolgere chiunque " – Brent

Se ho capito bene,

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

dovrebbe ottenere ciò che si sta andando per.

fonte

2011-10-14 01:53:10 Dennis

Il modo più semanticamente corretto di fare ciò è di mettere l'intestazione all'esterno del contenitore principale, evitando lo position:absolute.

Esempio:

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

L'altro metodo (tenendolo in <section class="main-content">) è come hai detto, non corretta, come un div (o sezione) si suppone che contengono elementi, non ha li estendono fuori dai limiti di il loro genitore div/sezione. Avrai anche problemi con IE (credo che qualsiasi cosa sia 7 o meno, potrebbe essere solo IE6 o meno) se il tuo bambino si estende al di fuori del div genitore.

fonte

2011-10-14 02:33:16

+1 Questo è vicino a come lo farei, ma puoi lasciare la dichiarazione di larghezza fuori dagli stili' .header' (o esegui 'width: auto'). Di default l'elemento a livello di blocco è largo quanto contiene l'elemento. In questo modo non ti imbatti in problemi quando aggiungi margine/riempimento ad esso. Non direi che questo è il metodo più "semantico", ma è meno disordinato. – Brent

Buoni punti entrambi, ho modificato sopra per rimuovere il CSS non necessario sull'intestazione e ho usato elementi HTML5 per rendere il codice più semantico ... non era la parola giusta, forse solo più corretta;) –

Ci sono un paio di modi per farlo.

Posizionamento assoluto
Come altri hanno suggerito, se si dà l'elemento che si desidera allungare attraverso le proprietà CSS pagina di larghezza 100% e posizione assoluta, che coprirà l'intera larghezza della pagina.

Tuttavia, sarà anche situato nella parte superiore della pagina, probabilmente oscurando gli altri contenuti, che non faranno spazio al tuo contenuto ora al 100%. Il posizionamento assoluto rimuove l'elemento dal flusso del documento, quindi agirà come se il contenuto appena posizionato non esistesse. A meno che tu non sia disposto a calcolare esattamente dove dovrebbe essere il tuo nuovo elemento e fare spazio, questo probabilmente non è il modo migliore.

Immagini: è anche possibile utilizzare una raccolta di immagini per arrivare a ciò che si vuole, ma buona fortuna aggiornarlo o apportare modifiche al culmine di una qualsiasi parte della pagina, ecc Anche in questo caso, non è grande per la manutenibilità.

nidificati DIV
Questo è quanto vorrei suggerire di farlo. Prima di preoccuparci di uno qualsiasi degli elementi di larghezza pari al 100%, per prima cosa ti mostrerò come impostare l'aspetto centrato 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 i CSS in questo modo:

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

Ora hai quello sembra ad essere un contenitore intorno al vostro contenuto centrato, quando in realtà ogni fila di contenuto in movimento in basso nella pagina è costituito da un div contenente, con una classe semantica e descrittiva (come header, mainContent, ecc.), con una classe "center" al suo interno.

Con quello istituito, rendendo l'intestazione sembrano "uscire del div contenitore" è facile come:

.header { 
    background-color: navy; 
}

E il colore raggiunge ai bordi della pagina. Se per qualche motivo si desidera che il contenuto sé per allungare attraverso la pagina, si potrebbe fare:

.header .center { 
    width: auto; 
}

E questo stile sarebbe ignorare lo stile .center, e rendere i contenuti del intestazione estendono ai bordi della pagina .

Buona fortuna!

fonte

2011-10-14 03:18:56 rhodesjason

Se si desidera che lo sfondo dell'elemento si estenda su tutta la pagina, questo può essere ottenuto anche con margini negativi.

In poche parole (correzione da commentare):

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

Che ti dà barre di scorrimento orizzontale che si rimuove con:

body {overflow-x: hidden; }

C'è una guida a http://www.sitepoint.com/css-extend-full-width-bars/. Potrebbe essere più semantico farlo con gli elementi psuedo: http://css-tricks.com/full-browser-width-bars/

fonte

2013-10-31 22:11:32 Mark

il 100% non lavoro, ma 3000px ha fatto, grazie – max4ever

Fantastico! Ho usato questa soluzione (meno l'overflow: nascosto) su un sito WordPress Thrive Themes per superare alcuni stili stupidi che hanno preimpostato e ha funzionato come un fascino. –

Questa dovrebbe essere la risposta accettata, come la posizione: assoluta; fix rimuove l'elemento dal corpo del flusso, che richiede markup extra su altri elementi per garantire che detti elementi non siano sovrapposti dal codice a larghezza intera. – Adam

Immagino che tutte le soluzioni siano obsolete.

Il modo migliore per sfuggire ai limiti di un elemento è con l'aggiunta di:

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

discussione può essere trovato here e here. C'è anche una bella soluzione per il prossimo grid-layouts.

fonte

2017-09-18 15:11:04

Questo commento è stato molto utile. Stavo cercando di trovare una soluzione piacevole per rompere il contenitore di layout griglia Materialize CSS e questo ha fatto il trucco – CDerrig

Scappare i limiti di un contenitore div

risposta

Problemi correlati