Div wrapper a tutto schermo indipendente da risoluzione

**cubalibre** · 16-08-2009, 14:00

Ciao,
dopo numerosi tentavi, esausto, posto sul forum quello che cercavo di fare:
in pratica vorrei definire un div "wrapper" come contenitore del sito, che occupi sia un larghezza che in altezza sempre tutto lo schermo.
In larghezza è ok ma in altezza non si espande.
Ecco il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title ></title >
<style type="text/css"/>
#wrapper{
width:100%;
height:100%;
background-color:#F1F1F1;
}
</style>
</head>
<body>
<div id="wrapper">WRAPPER
</div>
</body>
</html>

Qualcuno mi dice dove sbaglio?

Nico

**Mich_** · 17-08-2009, 09:55

Attenzione che con la DTD che usi non puoi mettere lo stile dentro il file HTML.

Comunque il tuo #wrapper si estende come tutto il body. Il problema e` che il body non si espande.

Per poter usare le dimensioni in % occorre che il contenitore abbia dimensioni definite.

Vedi questo CSS:

codice:

html, body {
  width: 100%;
  height: 100%;
  background-color: green;  /* per prova: se vedi del verde, vuol dire che il wrapper non copre tutto */
}
#wrapper{
  width:100%;
  height:100%;
  background-color:#F1F1F1;
}

**cubalibre** · 30-08-2009, 20:27

ciao, tornato dalle ferie ho fatto subito la prova:
adesso il wrapper si espande ma tutto intorno ha una cornice verde.
Sono nate la barre di scorrimento verticale ed orizzontale.
prova effettuata con IE7.

Nico

**Mich_** · 31-08-2009, 09:38

Forse hai impostato dei margini?

Dovresti postare tutto il codice che usi (HTML, CSS, DOCTYPE), oppure (meglio) un link alla pagina.

**cubalibre** · 01-09-2009, 07:44

ecco il link
http://www.phpcode.it/prova.htm

**Mich_** · 01-09-2009, 09:40

Ho visto.
Ho fatto qualche prova.

Il margine sinistro sparisce se metto
margin: 0;
nella formattazione di html e body. E di conseguenza sparisce la barra di scroll inferiore
Invece il margine superiore non va via.

Altra prova: se metto
padding: 1px;
nel wrapper, allora il margine superiore si riduce (e non compare margine sinistro), ma se il padding viene fissato a 0, allora ricompare la striscia verde.

Sto pensando ad un baco del brwoser (per queste prove ho usato Mozilla).

Discussione: Div wrapper a tutto schermo indipendente da risoluzione

Strumenti discussione

Ricerca discussione

Visualizza

Div wrapper a tutto schermo indipendente da risoluzione

Permessi di invio