PDA

View Full Version : [HTML] Altezza automatica dei <div>

xeeynamo
21-11-2008, 14:47
Ciao tutti! Stò facendo un sito web e stò cercando di riuscire a fare una cosa... Io ho due div di diverse dimensioni uno a sinistra (menu) e l'altro a destra (testo)... E' tutto perfetto, ma l'unica cosa che manca è che ad esempio quando il menu o il testo è più alto dell'altro, non sono della stessa altezza.. E' bruttino da vedere, quindi stò cercando di fare in modo che dia l'altezza automaticamente ad entrambi i div, così nel caso uno fosse più alto dell'altro, l'altro si allungherebbe in automatico avendo la stessa altezza dell'altro. Ho provato con height: auto; ma senza successo :doh:
Come posso fare?:D
anonimizzato
21-11-2008, 20:24
Ciao tutti! Stò facendo un sito web e stò cercando di riuscire a fare una cosa... Io ho due div di diverse dimensioni uno a sinistra (menu) e l'altro a destra (testo)... E' tutto perfetto, ma l'unica cosa che manca è che ad esempio quando il menu o il testo è più alto dell'altro, non sono della stessa altezza.. E' bruttino da vedere, quindi stò cercando di fare in modo che dia l'altezza automaticamente ad entrambi i div, così nel caso uno fosse più alto dell'altro, l'altro si allungherebbe in automatico avendo la stessa altezza dell'altro. Ho provato con height: auto; ma senza successo :doh:
Come posso fare?:D

Ti dico subito che non è possibile farlo, questo era un comportamente tipico che si otteneva con le celle di tabella ma con i DIV non è possibile.

Quello che puoi fare però è "simulare" tale effetto, ad esempio crei un DIV contenitore che racchiude i due DIV e ad esso vi associ un'immagine di sfondo larga tanto quanto i due DIV e che si ripete in verticale.

l'immagine avrà quindi ad esempio la parte sx di un colore (corrispondente esattamente alla larghezza del DIV di sx) e la parte dx di un altro colore (idem come per la sx).

A questo punto quando uno qualsiasi dei due DIV allungherà verrà allungato ovviamente anche il DIV contenitore che, data l'immagine di sfondo, farà apparire sempre le due colonne della stessa altezza.

Credimi è più difficile da spiegare che da fare.

Ciao.
xeeynamo
22-11-2008, 17:26
Ti dico subito che non è possibile farlo, questo era un comportamente tipico che si otteneva con le celle di tabella ma con i DIV non è possibile.

Quello che puoi fare però è "simulare" tale effetto, ad esempio crei un DIV contenitore che racchiude i due DIV e ad esso vi associ un'immagine di sfondo larga tanto quanto i due DIV e che si ripete in verticale.

l'immagine avrà quindi ad esempio la parte sx di un colore (corrispondente esattamente alla larghezza del DIV di sx) e la parte dx di un altro colore (idem come per la sx).

A questo punto quando uno qualsiasi dei due DIV allungherà verrà allungato ovviamente anche il DIV contenitore che, data l'immagine di sfondo, farà apparire sempre le due colonne della stessa altezza.

Credimi è più difficile da spiegare che da fare.

Ciao.
Ho capito alla perfezione cosa intendi, ma mi sa che a stò punto lascio perdere, anche perchè la pagina è organizzata in modo diverso: ho due div di sfondo bianco che sono distanti da loro 5 pixel (quindi si intravede per 5 px lo sfondo di dietro che è nero) quindi mi arrangio XD grazie lo stesso ^^
vladix
23-11-2008, 08:22
nada e impossibile , anzi direi che se ho capito bene e semplicissimo , ti fai una funzione javascript che setta l'altezza del div piccolo con l'altezza del div grande , che la chiami al onload della pagina ( oppure con l'evento che massimizza il menu se e d albero ... o quando aggiungi testo ad un div ... vedi tu )

<html>
<head>
<title>Untitled Document</title>
<style>
div {
border: 3px double blue;
width:100px;
}

div, input{
margin-left:30px;
}
</style>
<script>
function setHeight(){
var divA = document.getElementById('divA');
var divB = document.getElementById('divB');

var height = divA.offsetHeight;
divB.style.height = height+"px";
}
</script>
</head>

<body style="display:inline;">

<div id="divA">pippo <br/>lol </div><br />
<div id="divB">pluto</div><br />
<input type="button" value="lancia shuttle" onclick="setHeight();" />
</body>
</html>
anonimizzato
23-11-2008, 11:17
Sinceramente: aberrante.

Questa cosa di usare javascript ho proprio evitato di suggerirgliela perchè come soluzione è veramente brutta se uno non vuole creare codice spazzatura.
vladix
23-11-2008, 11:42
Sinceramente: aberrante.:spam:

Questa cosa di usare javascript ho proprio evitato di suggerirgliela perchè come soluzione è veramente brutta se uno non vuole creare codice spazzatura.
javascript e solo un linguaggio x manipolare il dom ... secondo me e un ottimo strumento x evitare mettere immagini di sfondo x creare componenti di dimensioni uguali alle immagini e creare componenti di dimensioni dinamiche ! E per quale motivo sarrebbe codice spazzatura ? :mbe:
Kralizek
23-11-2008, 11:44
come mandare l'accessibilità a donne allegre. e con lei ogni speranza di un rating decente con i motori di ricerca.
xeeynamo
23-11-2008, 20:47
niente, ho provato il javascript ma non va...
@vladix: ti invio via messaggio privato col link del mio sito così vedi tu stesso il sito