css 100% larghezza div non occupando tutta la larghezza del genitore

Ho due div in una pagina. un grid-container che prende uno sfondo e una griglia interna che deve essere posizionata al centro dell'altra griglia. Il mio css:css 100% larghezza div non occupando tutta la larghezza del genitore

html, body{ 
    margin:0; 
    padding:0; 
    width:100%; 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
    width:100%; 
} 
#grid{ 
    width:1140px; 
    margin:0px auto; 
}

A questo punto, l'immagine della bg # grid-contenitore si riempie solo la finestra, non l'intera larghezza del codice HTML. Il sintomo di ciò è che se si restringe la finestra del browser in modo che sia necessaria una barra di scorrimento orizzontale e si aggiorni la pagina, l'immagine di bg termina dove termina la finestra del browser. Quando scorro verso destra, l'immagine bg non è lì. Idee?

MODIFICA: ok, per richieste, ho modificato il mio css/html. Quando rimuovo la designazione della larghezza nel contenitore-griglia #, si restringe alla larghezza del contenitore all'interno, il che è anche peggio. Ecco quello che ho adesso:

html, body{ 
    margin:0; 
    padding:0; 
    min-width:1140px; 
} 
body{ 
    background:url(../images/page-background.jpg) repeat-x top left !important; 
    height:100%; 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
    padding-top:1px; 
} 
#grid-container2{ 
    width:1140px; 
    margin:0px auto; 
} 
.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

e il codice html:

<!DOCTYPE HTML> 
<html> 
<head> 
--- 
</head> 

<body> 
... 
<div id="grid-container" class="clearfix"> 
<div id="grid">..all kinds of things in here</div> 
</div>

fonte

2011-08-24 panzhuli

si può aggiungere il codice HTML per favore? –

Questo è logico. Dì al browser di impostare la larghezza per essere al 100% del browser. – Luuk

Rimuovi la larghezza: 100% e dovrebbe fare il trucco. http://www.impressivewebs.com/width-100-percent-css/ –

Il problema è causato dal telefono #grid avente uno width:1140px.

È necessario impostare min-width:1140px su body.

Questo arresta lo body di dimensioni inferiori a #grid. Rimuovi width:100% poiché gli elementi a livello di blocco occupano la larghezza disponibile per impostazione predefinita. Live Esempio: http://jsfiddle.net/tw16/LX8R3/

html, body{ 
    margin:0; 
    padding:0; 
    min-width: 1140px; /* this is the important part*/ 
} 
#grid-container{ 
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; 
} 
#grid{ 
    width:1140px; 
    margin:0px auto; 
}

fonte

2011-08-24 15:12:07 tw16

per qualche motivo, il contenitore della griglia # aveva ancora bisogno della larghezza: 100%. Non sei sicuro del perché, ma ci sei. Grazie! – panzhuli

"Rimuovi larghezza: 100% poiché gli elementi a livello di blocco occupano la larghezza disponibile per impostazione predefinita." - grazie solo della conferma che stavo cercando –

Rimuovere le width:100%; dichiarazioni.

Gli elementi di blocco devono occupare l'intera larghezza disponibile per impostazione predefinita.

fonte

2011-08-24 15:04:23 Geert

Vero, grazie! – RynoRn

html, body{ 
    width:100%; 
}

Questo indica che l'html è largo al 100%. Ma il 100% si riferisce all'intera larghezza della finestra del browser, quindi non più di questo.

Si consiglia di impostare una larghezza minima.

html, body{ 
    min-width:100%; 
}

Quindi sarà al 100% come minimo, più se necessario.

fonte

2011-08-24 15:04:33

css 100% larghezza div non occupando tutta la larghezza del genitore

risposta

Problemi correlati