CSS: perchè i livelli con altezza al 100% non funzionano correttamente?

**andrewhair** · 25-11-2003, 11:42

Vorrei creare un livello che occupi il 100% della pagina in altezza.
Tramite i css creo questo:

#menu {
width:180px;
background-color:#CCCCCC;
height: 100%;
}

Il problema è che il livello non mi occupa il 100% della pagina bensì circa 50 pixel in altezza.

Se metto nei css anche questo:
body {
height: 100%;
}

Il mio livello sembra aver assunto il 100% della pagina ma, se aggiungo molte righe di testo a fianco del livello e mi esce uno scroll il livello menu non si adatta alla dimensione della pagina.

Spero di essere stato chiaro.
Ho fatto una ricerca approfondita nella rete ma non ho trovato granchè.
E' logico che se uso le tabelle al 100% tutto funziona ma, visto che ho il nuovo dreamweaver e che le pagine html sono sempre più orientate ai livelli,ai tag <div> e ai css ......

Grazie.

**cigno** · 25-11-2003, 11:45

Devi impostare i margini a zero:

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

**andrewhair** · 25-11-2003, 12:01

Ho provato....
Il risultato non cambia.

Vedi la pagina http://www.metalcast.it/prove/x.htm

**cigno** · 25-11-2003, 12:04

mi posteresti il codice?

**andrewhair** · 25-11-2003, 12:12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Layout a due colonne liquido</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
background-color:#FFFFFF;
height: 100%;
}

h1 {
margin:10px 10px 15px 10px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:bold;
color:#000066;
}

p {
font:12px verdana, arial, helvetica, sans-serif;
margin:10px 10px 16px 10px;
padding:0px;
}

#testata {
margin:0px;
padding:0px;
height:70px;
background-color:#33CC99;

}

#menu {
position:absolute;
top:70px;
left:0px;
width:180px;
background-color:#CCCCCC;
height: 100%;
}

#contenuto {
margin:0px 0px 0px 180px;
padding:10px;
background-color: #33CC99;
}
</style>
</head>

<body>
<div id="menu">
<h1>Menu</h1>

Menu 1</p>

Menu 2</p>

Menu 3</p>

..........</p>

..........</p>

</p>
</div>
<div id="contenuto">
<h1>Testo</h1>

.......d</p>

</p>

dd</p>

d</p>

d</p>

d</p>

d</p>

</p>

d</p>

d</p>

d</p>

dddddddddddd</p>

d</p>

d</p>

</p>

d</p>

d</p>

d</p>

d</p>

</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

d</p>

</p>
</div>
</body>
</html>

**andrewhair** · 25-11-2003, 12:39

Sono tre giorni che ci sbatto la testa....

**andrewhair** · 25-11-2003, 15:34

Nessuno riesce a darmi una spiegazione.....

Discussione: CSS: perchè i livelli con altezza al 100% non funzionano correttamente?

Strumenti discussione

Ricerca discussione

Visualizza

CSS: perchè i livelli con altezza al 100% non funzionano correttamente?

ecco il codice

Permessi di invio