div nidificati altezza 100%

**ciriman** · 22-09-2010, 13:16

salve,
consapevole delle mille discussioni su questo argomento, nel web non ho ancora trovato un'aiuto efficace al mio problema...

parto dal principio che ancora non sono riuscito ad ottenere un risultato per realizzare una colonna laterale che sia alta quanto il suo contenitore... quindi da qui poi si sviluppa tutto il mio ulteriore problema che riassumo cosi:

codice:

<div id="contenitore">

    <div class="colonna-left">
    
        <div class="modulo"> modulo 1</div>
        <div class="modulo"> modulo 2</div>    
        <div class="modulo"> modulo 3</div> 
        <div class="modulo-extra"></div>
       
    </div>

</div>

dove il contenitore ha un'altezza 100% e contiene suoi moduli con contenuti che variano e quindi modificano l'altezza complessiva, la colonna a sinistra è alta fino all'altezza totale del contenitore (quindi 100% possibile), i moduli all'interno della colonna sinistra hanno una dimensione dipendente dal loro contenuto... e il modulo EXTRA è alto tutta l'altezza disponibile rimanente per impegnare la colonna laterale. (sarebbe lo spazio che risulta dalla sotrazione della somma altezza moduli e l'altezza contenitore, la barra laterale sarà ovviamente uguale all'altezza del contenitore)

in sostanza MODULO-EXTRA sarà un div elastico che riempie lo spazio rimanente nel basso della colonna laterale. La colonna laterale avrà dimensione pari o minore al contenitore.

spero sia stato chiaro il mio intento

**ciriman** · 22-09-2010, 13:50

segue il codice esempio sul quale sto cercando la soluzione:

codice:

<style type="text/css">
<!--

html, body {
	height: 100%;
	margin: 0;
	text-align: center;
}

#contenitore {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background-color: #FF9;
	width: 500px;
}

.modulo {
	background-color: #FFF;
	margin: 10px;
	height: 150px;
	width: 200px;
}

.colonna-left {
	background-color: #FF0;
	float: left;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 220px;
}
.modulo-extra {
	height: 100%;
	width: 100%;
	background-color: #0F0;
}

-->
</style>
</head>

<body>

<div id="contenitore">contenitore 

    <div class="colonna-left">colonna 100% altezza contenitore
    
    <div class="modulo"> modulo 1</div>
    <div class="modulo"> modulo 2</div>    
    <div class="modulo"> modulo 3</div> 
    
    <div class="modulo-extra">modulo elastico</div>
       
    </div>

</div>

</body>
</html>

**Mich_** · 22-09-2010, 15:08

Cerca la tecnica chiamata "false colonne": nel forum se ne e` parlato molte volte (puoi partire dal sito citato nei "link utili", e/o da una ricerca in rete)

Nota: ti manca il clear (vedi ad esempio [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float)

**ciriman** · 22-09-2010, 15:19

..scusa la domanda, ma mi viene ora in mente... non esiste una espressione posta dopo il parametro "height:" che determini un valore sottraendo le altezze di due classi? potrebbe essere utile ????

**Mich_** · 22-09-2010, 15:48

non esiste una espressione posta dopo il parametro "height:" che determini un valore sottraendo le altezze di due classi? potrebbe essere utile

Ci sono dei tentativi, ma non tutti i browser sono d'accordo.

Potrebbe arrivare qualcosa con i CSS3 (non ancora implementai, che io sappia)
e si puo` fare per IE (utilizzando espressioni che sono di fatto delle routine JS).

**ciriman** · 23-09-2010, 10:21

mi sembra dunque di capire che attualmente non ci sia un modo per far si che un div che contiene 2 div di qui il primo ad altezza fissa, possa contenere un div che si espanda in altezza per lo spazio rimanente...

quindi A contiene B+C , dove:

A = heigth: "valore"
B = height: "valore"
c = height: "A-B"

...al momento il più che sono riuscito ad ottenere è che "C" usando height: 100%, corrisponda alla stessa dimensione del div padre straripando da questo dato che al disopra c'è il div "B" che invece ha un valore definito.

non conosco linguaggi Java, per logica mi servirebbe una funzione da abbinare ad un mio div, ch mi restituisca l'espressione detta sopra... dove in sostanza prendo le altezze di due div di riferimento (A e B) e deduco un valore con la loro sottrazione

è possibile ho sto perdendo tempo nella ricerca di una soluzione che non esiste per limiti di sistema che sto usando ?

grazie cmq per l'attenzione.

**Mich_** · 23-09-2010, 10:58

mi sembra dunque di capire che attualmente non ci sia un modo per far si che un div che contiene 2 div di qui il primo ad altezza fissa, possa contenere un div che si espanda in altezza per lo spazio rimanente...

No, ma ci sono sistemi per aggirare l'ostacolo:

codice:

<div id="A" style="height: ...px">
  <div id="C" style="height:100%">
    <div id="B" style="height: 200px;">
      

contenuto del blocco B</p>
    </div>
    

contenuto del blocco C</p>
  </div>
</div>

Ho fatto uno schema di massima, e con gli stili in linea solo per motivi didattici - non e` un bel modo di usarlo.
Nello schema, i blocchi A e C coincidono, e se la cosa rimane cosi` uno e` di troppo

non conosco linguaggi Java

Per cosa? Qualsiasi linguaggio lato server puo` fare il lavoro, se conosci le dimensioni. Ma non credo sia il tuo caso.

Piuttosto si puo` ovviare con linguaggi lato client, tipo JS (Javascript - che e` tutta un'altra cosa da Java), ma la cosa si complica parecchio e non e` garantito che JS sia abilitato nel browser dell'utente.

è possibile ho sto perdendo tempo nella ricerca di una soluzione che non esiste per limiti di sistema che sto usando ?

Le soluzioni ci sono: ci sono in rete esempi didattici di come impostare i layout: fai prima a cercare tra quei siti (alcuni riferimenti tra i "link utili")

**ciriman** · 23-09-2010, 11:26

Originariamente inviato da Mich_
No, ma ci sono sistemi per aggirare l'ostacolo:

codice:

<div id="A" style="height: ...px">
  <div id="C" style="height:100%">
    <div id="B" style="height: 200px;">
      

contenuto del blocco B</p>
    </div>
    

contenuto del blocco C</p>
  </div>
</div>

(...)

Nello schema, i blocchi A e C coincidono, e se la cosa rimane cosi` uno e` di troppo

Grazie per l'esempio, ma mi dispiace sia totalmente inutile all'intento, come giustamente hai fatto notare A e C coincidono in altezza.. ma anche nella loro gerarchia superiore rispetto B.. che di conseguenza è sempre e cmq dentro C ..che invece dovrebbe essere consecutivo con sue caratteristiche di margin rispetto a B ...insomma cosi facendo è uguale tenere A e B.

...ancora grazie per l'attenzione. Cerchero qualche soluzione con JS compatibile con i browser maggiori.

**softhare** · 26-09-2010, 20:10

Ci sarebbe anche un altra soluzione, ma molti la riterrebbero "out" anche se funziona perfettamente: usare una tabella invece di un div.

I layout tableless sono molto interesanti dal punto di vista concettuale, ma io ho la impressione che, con le attuali specifiche dei CSS, cetrte cose non si possono fare, o quantomeno sono infinitamente più complesse di una buona vecchia tebella.

Forse con CSS3, quando sarà una realtà su cui si potrà fare affidamento, le cose miglioreranno.
Per il momento non mi vergogno affatto ad usare una tabella dove ciò rende tutto più semplice che non l'uso ad oltranza dei div.

Discussione: div nidificati altezza 100%

Strumenti discussione

Ricerca discussione

Visualizza

div nidificati altezza 100%

Permessi di invio