altezza come la finestra del browser

**luca7** · 21-08-2004, 11:37

ho notato la prima pecca in mozilla (se si può definire pecca!)

in pratica se l'altezza non è tale da necessitare lo scroller verticale mozilla non lo mette proprio; contrariamente lo mette e ciò genera uno spostamento del contenuto di qualche pixel a sinistra

ora io ho una struttura di questo genere

con questo css

codice:

#main { width: 100%; height: 100%; background-color:#CCCCCC }
#header { width: 100%; height: 100px; background-color: #0000FF }
#navbarleft { width: 200px; height: 100%; background-color: #00FF00; float: left }
#navbarright { width: 200px; height: 100%; background-color: #00FF00; float: right }
#center { margin: 0px 200px 0px 200px; height: 100%; background-color:#FF0000 }
#footer { width: 100%; height: 100px; background-color: #0000FF }

come posso fare affinchè nelle pagine che non sono così alte da creare lo scroller l'altezza sia invece il 100% disponibile + 1pixel (per creare lo scroller) e nelle pagine che il testo è molto allungare automaticamente il tutto finchè c'è testo?

**Jerry Masslo** · 21-08-2004, 12:07

posta pure l'html, già non si ha voglia comunque di riscrivere quello che già hai scritto figuriamoci ad agosto

comunque per avere sempre lo scroll anche con mozilla o opera basta dare al body height:101%

**luca7** · 21-08-2004, 12:33

codice:

<!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>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin : 15px; height: 101% }
#main { width: 100%; height: 101% }
#header { width: 100%; height: 100px; background-color: #0000FF }
#navbarleft { width: 200px; height: 100%; background-color: #00FF00; float: left }
#navbarright { width: 200px; height: 100%; background-color: #00FF00; float: right }
#center { margin: 0px 200px 0px 200px; height: 100%; background-color:#FF0000 }
#footer { width: 100%; height: 100px; background-color: #0000FF }
</style>
</head>

<body>

<div id="main">
  <div id="header"></div>
  <div id="navbarleft"></div>
  <div id="navbarright"></div>
  <div id="center"></div>
  <div id="footer"></div>
</div>

</body>
</html>

il sito ancora non c'è mi hanno chiesto di fare una cosa del genere (il layout intendo) e ho visto che c'è questo problema. prima di cominciare a scrivere l'html volevo capire come aggirare questo problema

ho provato a mettere l'altezza di body a 101% ma ancora non funzia con mozilla...con ie non ne parliamo

p.s. io ho una risoluzione di 1280x1024 ma tanto in pochi ce l'hanno

**luca7** · 21-08-2004, 19:55

**Jerry Masslo** · 22-08-2004, 09:44

ieri fu sabato poi era anche agosto

vedi se ti va questo

<!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>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

* {margin:0;padding:0}
html, body {height:101%}

body {background:silver;
margin:15px
}
#main {background: #00FF00;
}

#header { min-height: 100px;
height:auto!important;
height:100px;
background: #0000FF
}
#navbarleft { width: 200px;
float:left }
#navbarright { width: 200px;
float:right }
#center { margin: 0px 200px 0px 200px;
min-height:300px;
height:auto!important;
height:300px;
background:#FF0000 }
#footer {
min-height: 100px;
height:auto!important;
height:100px;
background: #0000FF
}
</style>
</head>

<body>

<div id="main">
<div id="header">Header </div>
<div id="navbarleft">Sinistra</div>
<div id="navbarright">Destra</div>
<div id="center">Centro</div>
<div id="footer">Footer</div>
</div>

</body>
</html>

quello esatto che hai chiesto è piuttosto complicato e non so nemmeno si possa risolvere senza ricorrere a javascript per cui vedi se riesci a non fare il difficile

Discussione: altezza come la finestra del browser

Strumenti discussione

Ricerca discussione

Visualizza

altezza come la finestra del browser

Permessi di invio