div vuoto ad altezza browser

**robo12** · 23-10-2007, 19:00

salve, se volessi inserire un div anche vuoto e forzarlo ad avere la stessa altezza di tutta la finestra del browser come si fa?
height: 100% non funziona

**ricman** · 24-10-2007, 09:50

Originariamente inviato da robo12
salve, se volessi inserire un div anche vuoto e forzarlo ad avere la stessa altezza di tutta la finestra del browser come si fa?
height: 100% non funziona

Guarda... ho scritto:

codice:

<div style="height:100%; background-color:#99FF33 ">ciao</div>

e nel mio browser è comparsa una bella videata verde. C'era il margine che non ho settato a Zero.
Quindi funziona...

**robo12** · 24-10-2007, 13:32

mi spiace ma a me non funziona

questo il css:

/* CSS Document */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
font-size: 100.01%;
font-family: Arial, Helvetica, sans-serif;
background: #FFF url(../images/dna_bg.jpg) repeat-y;
background-position: top left;
text-align: center;
color: #333;
line-height: 1.4;
}

#wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #99FF33;
text-align: left;
color: #333;
}

#header{
height: 44px;
background: #F0F0F0;
color: #09C;
}

e questo il markup xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DNA.RC - I NOSTRI PRODOTTI LASCIANO IL SEGNO</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
Content for id "wrapper" Goes Here
</div>
</body>
</html>

**ricman** · 24-10-2007, 15:14

Originariamente inviato da robo12
mi spiace ma a me non funziona

Copiato e incollato... questo è il risultato:

**ricman** · 24-10-2007, 15:15

Ovviamente l'header bianco ce lo hai messo te (di 44px)... altrimenti prenderebbe l'intero browser...

**robo12** · 24-10-2007, 15:26

davvero, a me invece non funziona. Nessuna idea del perchè? Tanto su FF quanto su IE

**Mich_** · 24-10-2007, 16:29

E` sempre il solito problema (gia` affrontato molte volte).

100% di che? Di una dimensione non definita!!

Perche` height: 100% funzioni, occorre che la dimensione del contenitore sia definita.
Nel caso specifico occorre definire
height: 100%;
al contenitore <body> e quindi ricorsivamente al <html>

**robo12** · 24-10-2007, 16:37

infatti io l'avevo visto in un altro post ma non mi riusciva lo stesso. Mi faresti un esempio pratico con il codice per favore? Devo inserire height:100% dove? nel css al body? o nell'xhtml?

**frida07** · 24-10-2007, 16:38

Infatti hai ragione...in effetti quello che tu dici al contenitore wrapper è che deve essere il 100% di altezza ma di cosa?
Invece ci sono 2 piccoli javascript che ti risolvono totalmente il problema. Ho provato.
Se vuoi scrivimi che te li mando...sono un po' lunghi da copiare qui.

C'è anche un trucchetto per cui tu dai il position absolute al wrapper e top,left,right e bottom 0 e il contenitore prende tutta l'altezza (azzera margin e padding del body) ma funziona su FF e IE 7 ma non sul 6. Quindi un po' inutile.

Se ti servono i js scrivimi.
ciaociao

dada0791@gmail.com

**robo12** · 24-10-2007, 16:40

ok l'ho scritto cosi:

/* CSS Document */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
height: 100%;
}

body {
font-size: 100.01%;
font-family: Arial, Helvetica, sans-serif;
background: #FFF url(../images/dna_bg.jpg) repeat-y;
background-position: top left;
text-align: center;
color: #333;
line-height: 1.4;
}

#wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #99FF33;
text-align: left;
color: #333;
}

#header{
height: 44px;
background: #F0F0F0;
color: #09C;
border-bottom: solid #69B1FB 1px;
}

inserendo la proprietà height:100% sia nella dichiarazione di html che di body e funziona. E' corretto cosi?

Discussione: div vuoto ad altezza browser

Strumenti discussione

Ricerca discussione

Visualizza

div vuoto ad altezza browser

Re: div vuoto ad altezza browser

Permessi di invio