div full screen

[readysteadygo]

Come fare per rendere full screen il SOLO div navigation nel codice sotto riportato visto che come scritto diventa comunque di larghezza 900px? GRAZIE

body {
padding: 0px;
margin: 0px;
}

#wrapper {
margin: 0 auto;
width: 900px;
}

#header {
width: 900px;
float: left;
height: 100px;
}

#navigation {
float: left;
width: 100%;
}

#footer {
width: 900px;
clear: both;
}

[Mich_]

Anzitutto sarebbe bello vedere la struttura HTML, altrimenti e` difficile capire come devono sistemarsi i blocchi (header e footer stanno dentro o fuori dal wrapper?).
E nel caso di una struttura diversa da quelle standard, e` buona cosa unire uno schemino (puoi realizzarlo a rettangoli colorati con qualsiasi strumento di grafica).

Comunque non puoi uscire dai limiti della finestra del browser, per cui il tuo fullscreen sarebbe da intendersi "occupa tutto lo spazio del browser".

[readysteadygo]

Grazie per la tua risposta. SIa header che footer sono interni. Cerco solo di inserire uno sfondo nel div navigation che riempia tutto lo schermo a prescindere delle dimensioni del divice che lo guarda. Ti allego una immagine e ti ringrazio per la pazienza.immagine.jpg

[Mich_]

Per usare il width: 100% e` necessario che sia definita la larghezza del contenitore.

Quindi il tuo CSS dovrebbe diventare:

html {
  width: 100%;
}

body {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

#wrapper {
  margin: 0 auto;
  width: 900px;
  position: static;   /* e` il default, ma lo specifico per sicurezza */
}

#header {
     width: 900px;
     float: left;
     height: 100px;
}

#navigation {
  position: absolute;     /* questo sgancia il posizionamento dal suo contenitore statico e lo aggancia al body */
    /* float: left;    --- non puo` essere flottante, dato che e` assoluto -- */
  width: 100%;
  margin-top: XXXpx;    /* dove XXX e` la somma delle altezze dei blocchi precedenti */
}

#footer {
    width: 900px;
    clear: both;
}

Questo dovrebbe risolvere il tuo problema, ma rende il navigation non relativo ai blocchi precedenti, per cui va lasciato lo spazio.
Se i blocchi preced hanno altezza fissa, non e` un problema; se hanno altezza variabile, la cosa diventa complessa.


In alternativa, puoi cambiare un po' la logica, dando il width:900px e margin:0 auto a tutti i blocchi che vuoi piu` stretti, e lasciando il width 100% al wrapper

[readysteadygo]

Grazie 1000