[CSS] height: 100%

[Rumez]

Ciao...vorrei impostare l'altezza di un componente in modo che mi occupi tutta l'area disponibile della finestra del browser (in altezza ovviamente) indipendentemente dalla risoluzione che si sta utilizzando.

La mia situazione è questa:
Ho un DIV che dovrà conetere dei dati tabellari..molti dati..per cui ho attivato la proprietà overflow: auto.
Dentro questo DIV c' è una tabella che contiene i dati di cui sopra.
Questo DIV e la TABLE in esso contenuta vanno a rappresentare il mio blocco "lista_clienti"

Il punto è questo..vorrei che la dimensione di questo blocco si autodimensioni all'altezza della finestra del browser..

Qualcuno sa aiutarmi?
spero di essermi spiegato bene...

[Ices_Eyes]

Il titolo del thread non funziona?

[Rumez]

eh...bella domanda..comunque non funziona...

mi spiego..se metto height:100% al DIV..questo mi perde l'overflow e mi diventa tanto lungo quanto la lista di dati della tabella che c'è al suo interno..

[Pacopas]

devi creare due box uno interno all'altro al primo devi dare il parametro il parametro height: 100%

[Rumez]

devi creare due box uno interno all'altro al primo devi dare il parametro il parametro height: 100%

no non ci siamo ancora...

attualmente è pressapoco così:

Codice: Seleziona tutto

...
<div style="overflow:auto">
   <table>
      <tr><td>bla bla bla</td></tr>
      ....
      ....
  </table>
</div>
...


se io imposto a questo div la proprietà 100% il box come già detto diventa lungo quanto è lunga la tabella..

ho provato ad inserire il tutto dentro ad un altro div a cui ho impostato la proprietà height:100%:

Codice: Seleziona tutto

...
<div style="height: 100%;">
   <div class="lista_cli" id="lista_cli">
   <table>
            <tr><td>bla bla bla</td></tr>
            ....
            ....
       </table>
   </div>
</div>
....


il risultato è il medesimo...

[Pacopas]

io avevo creato un sito web una volta più che altro per provare i css poi ho subito mollato per la solita motivazione non avrei messo nulla di nuovo sotto il sole comunque l'ho appena ricaricato ti linko la pagina in cui avevo risolto il tuo problema se è quello che cerchi ti spiego meglio come si fa altrimenti cerchiamo un'altra soluzione.

vedi il box di destra non è un frame è tutto css

page

[Rumez]

io avevo creato un sito web una volta più che altro per provare i css poi ho subito mollato per la solita motivazione non avrei messo nulla di nuovo sotto il sole comunque l'ho appena ricaricato ti linko la pagina in cui avevo risolto il tuo problema se è quello che cerchi ti spiego meglio come si fa altrimenti cerchiamo un'altra soluzione.

vedi il box di destra non è un frame è tutto css

page

si più o meno è quello che mi serve...solo che il blocco di destra (che da me è a sinistra e dovrebbe essere un menu con una lista lunghissima di righe ) dovrebbe avere una sua scroll bar...
non so se mi sono spiegato bene..

[Pacopas]

solo che il blocco di destra (che da me è a sinistra

per metterlo a sinistra devi solamente impostare
float: left; anzicchè right

e dovrebbe essere un menu con una lista lunghissima di righe ) dovrebbe avere una sua scroll bar...
non so se mi sono spiegato bene..

dentro puoi metterci ciò che vuoi è un div

dovrebbe avere una sua scroll bar...

ma quel div ha una sua scroll bar non è quella del browser e quella del div
se noti il resto della pagina non si muove è impostato così perché volevo dare un effetto frame e credo di esserci riuscito
aggiunta: infatti se metti il puntatore del mouse sulla parte destra della pagina e provi a scorrerla con la rotellina non si muove

dagli un'altra occhiata se mi dai ok provo a dare una rapida modifica e ti preparo un abbozzo di html fammi sapere io monitorizzo questa discussione perché non frequento spesso questa parte del forum

[Rumez]

ti ringrazio..mi basta qualche dritta...

allora il layout deve essere pressapoco così: vedi allegato

il tutto dovrà stare dentro la finestra del browser..layout liquido in altezza e in larghezza in modo che si possa adattare e qualsiasi risoluzione

Il menu a sx è una lunga lista..tabellare..quindi avrà bisogno di un div con proprietà overflow:auto.
Stesso discorso per il blocco centrale..
se mi dai una dritta non finirò mai di ringraziarti..

[Pacopas]

ti ringrazio..mi basta qualche dritta...

figurati non ci sarebbero stati problemi

il tutto dovrà stare dentro la finestra del browser..layout liquido in altezza e in larghezza in modo che si possa adattare e qualsiasi risoluzione

il modo più facile per far questo è creare un box width:100%; height:100%;
che contenga tutto testa, menù, contenuto e piede

Il menu a sx è una lunga lista..tabellare..quindi avrà bisogno di un div con proprietà overflow:auto.

e infatti basta impostargli l'overflow:auto

Stesso discorso per il blocco centrale..

come sopra

se hai roblemi dimmelo può essere che mi sfugga qualcosa sai a mente è più difficile.

[Pacopas]

guarda ho provato a farlo per evitare di dirti corbellerie alla fine il risultato è questo

se intendevi questo ti allega il file comunque è molto abbozzato.

[Rumez]

Sei Un Grosso!!E' proprio quello di cui ho bisogno..lunedì lo metto subito in piedi! Ti ringrazio tantissimo!

[Pacopas]

figurati nessun problema. contento che hai risolto.

comunque verifica la compatibilità con (semmai dovesse interessarti) perché la spazzatura appena citata non vede i margini e i bordi e il padding secondo lo standard

comunque se posso darti un consiglio i css non sono difficili devi solo evitare di pensare ad una impaginazione globale come si faceva con il layout tabellare quello usato prima della loro introduzione e immaginare che tutto è gestito come se scrivessi da sinistra a destra, quando non c'è più spazio vanno a capo (ora che studi il codice css della pagina capirai meglio)
se hai altri prob posta.

[Rumez]

Seguirò il consiglio...grazie ancora..

[Rumez]

ciao..scusa ma ho ancora dei problemi...
il layout dovrebbe essere come quello che ho allegato ora...ho fatto un po' di prove ma questi DIV si mettono un po' dove e come vogliono...

[Pacopas]

ma per fisso intendi di dimensioni fisse o che non faccia lo scroll con il menu ma può avere dimensioni in percentuale?

[Rumez]

intenderei che non fa lo scroll...credo che quindi si debba posizionarlo su altro div..giusto?

[Pacopas]

allora la mia domanda si riferiva a che dimensioni vuoi dargli se in px o percentuali comunque io farei così

nel div menu gia creato crei due div uno con dimensione fissa o percentuale come più ti aggrada e l'altro dome metti la tabella

spero di essere stato chiaro. se non sono riuscito a scpiegarmi posta che provo a farti un esempio pratico

[Rumez]

ok penso di aver capito...
il div menu mi diventa un contenitore..
al suo interno metto un box di dimensioni fisse (diciamo 200x200)
e poi un altro dove ci sarà la tabella...quest'ultimo avrà l'overflow...

io ci ho provato..ma non si posiziona a dovere..uff

[Pacopas]

hai capito però c'è un problema che è il seguente:
poichè tutto è impostato come percentuale se lasci tutto in percentuale viene così

Codice: Seleziona tutto

html
<div id="menu">
<div id="menufisso"></div>
<div id="menutab">
<table width="99%" border="1" cellpadding="0" cellspacing="0">
</table>
</div>
</div>


Codice: Seleziona tutto

css
#menu {
        float: left;
        overflow: auto;
        height: 80%;
        width: 20%;
        background-color: #00ffFF;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        border: 0px;   
}

#menutab {
        float: left;
        overflow: auto;
        height: 80%;
        width: 100%;
        background-color: #0000FF;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        border: 0px;   
}

#menufisso {
        float: left;
        overflow: auto;
        height: 20%;
        width: 100%;
        background-color: #00ffFF;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        border: 0px;   
}

vedi i due sotto menu si spartisco l'altezza del div menu all'80 e al 20 per cento.

se uno lo vuoi fare fisso è uguale ma devi cambiare tutto il blocco menù e rendere nel contenitore la larghezza fissa come il div_menufisso
fatto questo devi considerare che anche il div_blocco spartiva la larghezza in percentuale con il div_menu e quindi modificare tutto

per questo ti avevo chiesto se fisso o percentuale perché devi considerare tutto