non estende la larghezza della pagina intera

Su this page, ho uno sfondo a 2 toni. La struttura della pagina è:non estende la larghezza della pagina intera

<body> 
    <div id="upbg"/> 
    <div id="container"/> 
</body

Questo background si ottiene aggiungendo un'immagine di sfondo scuro per upbg e un'immagine di sfondo più chiaro sul corpo. Il CSS per upbg è:

#upbg { 
    background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0; 
    height: 275px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

Se si effettua la finestra del browser molto stretta in modo tale che le barre di scorrimento appaiono, quindi se si scorre verso destra si noterà che l'immagine di sfondo upbg non riempie l'intero larghezza della pagina.

La mia ipotesi è che questo è dovuto al fatto che "larghezza: 100%" indica la larghezza della finestra del browser, piuttosto che l'intera larghezza della pagina, c'è un modo per risolvere il problema?

Grazie, Don

fonte

2009-03-14 Dónal

La mia ipotesi è che questo è dovuto al fatto 'width: 100%' significa che la larghezza della finestra del browser, piuttosto che l'intero larghezza della pagina, c'è un modo a correggere questo?

100% significa che sarà largo quanto l'elemento principale è posizionato rispetto a (in questo caso, body, la cui larghezza si baserà sulla larghezza del suo genitore, html). Che sarà largo quanto la finestra del browser, a meno che non venga specificato diversamente.

Il problema è, si dispone di un altro bambino di body che può essere più ampio di quello body: sia #container e #footer sono arredate in modo tale che essi saranno sempre almeno 1026px ampia. Ciò non allarga i loro elementi genitore, poiché abbiamo già stabilito che saranno larghi quanto la finestra del browser; invece, loro overflow i loro genitori. La risposta predefinita a questo è di visualizzare le barre di scorrimento in modo da poter scorrere e visualizzare il contenuto in eccesso; se hai aggiunto lo stile overflow:hidden a html o body, il contenuto e il piè di pagina verranno ritagliati alla dimensione della finestra del browser e non verranno visualizzate barre di scorrimento.

ci sono un paio di soluzioni facili a questo:

Wrap #content e #footer in #upbg invece di precedente con esso. Quindi rimuovi gli stili esistenti e formattali come segue: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; Questo compie due cose: non stai più specificando una larghezza per #upbg, permettendogli così di diventare abbastanza ampia da racchiudere i suoi nuovi figli, e ti permette di sbarazzarti di molti stili ora inutili (ti consigliamo di svuotare il padding che hai impostato per body e un po 'di stile su #content). In alternativa,
Elimina la larghezza minima su #content e #footer, in modo che non trabocchino.

fonte

2009-03-14 03:55:04 Shog9

Ottima risposta, grazie mille! Solo una domanda, se la prima riga della tua risposta fosse: "100% significa che sarà largo quanto l'elemento genitore a cui è posizionato in relazione. In questo caso, * body *." –

Uh, si. Ho un po 'rovinato quell'ultima modifica ... corretta. – Shog9

semplicemente è possibile utilizzare un'immagine assoluta posizionato sia con larghezza & altezza impostato al 100% avvolto con il corpo tagk, se è possibile utilizzare un intero sfondo. imposta l'indice z di altri elementi più in alto rispetto all'immagine considerata in background.

 

<head> 
    ... 
    <style> 
    .virtualBg{ 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     z-index: 0; 
    } 
    </style> 
</head> 
<body> 
    <img src="path/to/bg.jpg" class="virtualBg" /> 
    ... 
</body>

ma vi consiglio di usare un'immagine verticalmente ritagliata che contiene entrambi i toni di colore e quindi ripetere-x lo sfondo per l'elemento del corpo.

fonte

2009-03-14 06:12:21 sepehr

non estende la larghezza della pagina intera

risposta

Problemi correlati