Altezza 100% (compreso scroll)

**chiamatekatia** · 11-02-2008, 17:46

Ho un problema abbastanza semplice, ma che non riesco a risolvere. Desidero che un div (con position absolute) abbia altezza 100%, nel senso che occupi, in altezza, l’intera pagina, anche se presenta lo scroll. Se metto height: 100%, invece, mi occupa solo l’altezza relativa alla risoluzione video dell’utente. Come risolvo?

Grazie in anticipo

**chipdb** · 11-02-2008, 19:09

Originariamente inviato da chiamatekatia
Ho un problema abbastanza semplice, ma che non riesco a risolvere. Desidero che un div (con position absolute) abbia altezza 100%, nel senso che occupi, in altezza, l’intera pagina, anche se presenta lo scroll. Se metto height: 100%, invece, mi occupa solo l’altezza relativa alla risoluzione video dell’utente. Come risolvo?

Grazie in anticipo

non credo si possa

. magari aggira il problema, cosa devi fare?

**chiamatekatia** · 11-02-2008, 19:16

Devo fare due bordi laterali con immagini e mi risultava semplice farlo mettendo due div ai lati :P
Credo che, a questo punto, l'unica soluzione sia mettere tutto in un div container, giusto?

**chipdb** · 11-02-2008, 19:27

Si, suppongo di sì. Io di solito per fare qualcosa del genere faccio:

codice:

div contenitore
   div a sinistra float:left
   div centrale
   div a destra float:right

**chiamatekatia** · 11-02-2008, 22:31

Mmmh...ho provato ma non mi viene ^^''
Scusa non sono ancora pratico di css...
So che sono un rompiscatole, ma non è che potresti farmi un esempio pratico con tutto il css scritto?
Perchè a me i bordi laterali (ovvero i due div laterali) non seguono l'altezza di quello centrale (che è, tra parentesi, il contenitore di altri due div).

**chipdb** · 11-02-2008, 22:33

Perchè devi settare un altezza al body e al div contenitore. Adesso non ho un esempio qui, appena lo trovo ti faccio sapere, comunque prova intanto

**chiamatekatia** · 11-02-2008, 23:00

Ho provato, ma senza risultati

Con tutta probabilità sarà un errore stupido. Ti lascio il codice:

codice:

<style type="text/css">
html, body{
hetght: 100%;
width: 100%;
}
body{
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background: #666600;
margin: 0;
}
div.container
{
position: absolute;
width: 764px; 
background: #FFFFFF;
left: 50%;
margin-left: -382px;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
height: 100%;
}
div.bordo_sinistro
{
position: relative;
float: left;
background:url(bordo_sinistro.png) repeat-y #666600;
width: 7px;
margin-left: 0px;
margin-top: 0px;
}
div.bordo_destro
{
position: relative;
float: right;
background:url(bordo_destro.png) repeat-y #666600;
width: 7px;
margin-left: 0px;
margin-top: 0px;
height: 100px;
}
div.centrale
{
position: relative;
width: 750px;
margin-left: 0px;
margin-top: 0px;
}
</style>

codice:

<body>
<div id="container" class="container">
        <div id="bordo_sinistro" class="bordo_sinistro"></div>
        <div id="centrale" class="centrale">

Ciao</p></div>
        <div id="bordo_destro" class="bordo_destro"></div>
</div>
</body>

Grazie

**chipdb** · 11-02-2008, 23:10

codice:

html, body{
hetght: 100%;
width: 100%;
}

controlla come hai scritto height

**chiamatekatia** · 11-02-2008, 23:24

Pensavo fosse un errore stupido, ma non fino a 'sto punto .___.

In compenso continua a non funzionare

Mi appare solo la scritta "Ciao" senza alcun bordo. Ho provato a mettere un altezza dei bordi fissa (solo per vedere che effetto faceva e cercare di comprendere cosa non funzionasse) ed in pratica mi mette il div centrale (con scritto "Ciao") affianco al bordo sinistro (correttamente visualizzato) e il bordo destro, invece, viene messo a destra, ma sotto il div centrale.

EDIT:
Ho controllato l'effetto nei diversi browser. Quello che sopra ti ho descritto (i bordi non appaiono) è per quanto riguarda Opera e Firefox.
In IE 7, invece, il bordo sinistro viene visualizzato correttamente, mentre quello destro viene visualizzato sotto.

**chipdb** · 11-02-2008, 23:30

Guarda, ho trovato una cosa molto simile al tuo problema, vedi se può esserti utile:

layout ad altezza 100%

Discussione: Altezza 100% (compreso scroll)

Strumenti discussione

Ricerca discussione

Visualizza

Altezza 100% (compreso scroll)

Re: Altezza 100% (compreso scroll)

Permessi di invio