Div altezza automatica

gracito

Utente Attivo
30 Mag 2010
109
0
0
Ciao a tutti.

Ho una pagina cosi composta,

div contenitore dove al suo interno ci sono tre div sinistra - div centro - div destra
voglio che l'altezza sia automatica e uguale per tutti i div.
Come posso rendere i div sinitra - centro - destra della stessa altezza pari a quella del div con contenuto maggiore?

Grazie
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao a tutti,
Scusate se riprendo questa discussione ma l'argomento mi interessa e non mi è molto chiaro.
Vi posto un esempio ridotto ai minimi termini:
Codice:
<style type="text/css">
            div#contenitore {
                width: 1000px;
                border: 1px solid #000;
                background-color: yellow;
            }
            div#sx {
                float:left;
                width:30%;
                background-color: #f7f7f7;
            }
            div#dx{
                float:left;
                width:70%;
                background-color: #f1f1f1;
            }
 
        </style>
    </head>
    <body>
        <div id='contenitore'>
            <div id="sx">
                testo<br/>
                testo<br/>
                testo<br/>
            </div>
            <div id="dx">
                testo<br/>
                testo<br/>
                testo<br/>
                testo<br/>
                testo<br/>
            </div>
        </div>
Il div 'contenitore' non dovrebbe prendere l'altezza del div contenuto piu alto?

Per quel poco che ho imparato sui css dovrebbe essere così eppure...

ho provato ad assegnare al contenitore height auto o height 100% ma niente da fare

se non gli assegno un height fisso non si muove

Qualcuno saprebbe darmi o indicarmi una spiegazione ?

Grazie

PS Nonostante seguo il forum da molto tempo oggi è il primo giorno in cui intervengo Mi scuso in anticipo con i moderatori se ho sbagliato qualche passaggio e mi complimento con tutti per le ottime spiegazioni su svariati argomenti a cui mi sono affidato per risolvere i miei dubbi.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Aggiungendo un div a chiusura con clear both l'altezza del contenitore si adatta. Senza no!

Per il momento ho risolto ma rimango con i miei dubbi

Codice:
<html>
       <head>
        <style type="text/css">
            div#container {
                width: 1000px;
                background-color: yellow;
            }
            div#sx {
                float:left;
                width:30%;
                background-color: #f7f7f7;
            }
            div#dx{
                float:left;
                width:70%;
                background-color: #f1f1f1;
            }
            div#fot{
                clear:both;
                width:100%;
                height:90px;
                background-color: #6e6e6e;
            }
}
 
        </style>
    </head>
    <body>
        <div id='container'>
            <div id="sx">
                testo<br/>testo<br/>testo<br/>
            </div>
          
            <div id="dx">
                testo<br/>testo<br/>testo<br/>testo<br/>testo<br/>testo<br/>
                testo<br/>testo<br/>testo<br/>testo<br/>testo<br/>testo<br/>
                testo<br/>testo<br/>testo<br/>testo<br/>testo<br/>testo<br/>
                testo<br/>testo<br/>testo<br/>testo<br/>
            </div>
           <div id="fot"></div>
        </div>
        
 
    </body>
</html>
 

jonny

Nuovo Utente
4 Dic 2003
7
0
0
Ciao a tutti.

Ho una pagina cosi composta,

div contenitore dove al suo interno ci sono tre div sinistra - div centro - div destra
voglio che l'altezza sia automatica e uguale per tutti i div.
Come posso rendere i div sinitra - centro - destra della stessa altezza pari a quella del div con contenuto maggiore?

Grazie


Riapro questa discussione che mi sembra incompleta dando ulteriori delucidazioni.

La mia soluzione è realizzata con Jquery !!! Con normale CSS non si può fare, poichè il valore per l'altezza 100% lo puoi dare solo se imposti un'altezza fissa del contenitore superiore.Col CSS quindi è possibile solo se tagli il testo dopo tipo 400 caratteri e metti altezza uguale per tutti.
Con il mio metodo , sfruttando la potenza di Jquery , si può leggere l'altezza del box maggiore e applicarla ai tutti i box con la stessa classe !!!

Ecco il link:

webmasterjoy.blogspot.it/2012/12/adattare-laltezza-dei-div-al-piu-alto.html

Basta guardare la funzione presente nel javascript, e cambiare il nome del box a cui vogliamo assegnare pari altezza.

Ciao!
 
Ultima modifica di un moderatore:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao jonni, volevo farti presente un articolo del regolamento
2.4 Sono vietati gli interventi di natura palesemente "concorreziale" nei confronti di questo forum (ad es. "vi invito a discuterne sul mio forum...") o di altre attività di Mr.Webmaster (ad es. "leggete il mio articolo dove vi spiego come fare..."). Tali interventi sono considerati, a tutti gli effetti, spam e verranno trattati come tale.
o posti il codice, o invii all'amministratore un articolo
 

jonny

Nuovo Utente
4 Dic 2003
7
0
0
pensavo fosse cosa gradita, visto che attualmente sono stato l'unico a realizzare questa soluzione con un semplice script di 10 righe.
Non riesco a rimuoverlo, puoi cancellarlo.

Ciao
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Il senso che avrebbe imporre alle colonne la stessa altezza sarebbe?...

Per queste cose si fanno le false colonne.
Basta un jpg (png o quello che ti pare) di larghezza della pagina e altezza 1pixel, mettere un pixel colorato dove vogliamo fare il bordo delle colonne e impostare come sfondo l'immagine che automaticamente (se non diversamente specificato) si moltiplica in orizzontale e verticale (ma essendo di larghezza del div si vedrebbe solo l'estensione in verticale).
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Jonn ha scritto:
Per queste cose si fanno le false colonne.
Basta un jpg (png o quello che ti pare) di larghezza della pagina e altezza 1pixel, mettere un pixel colorato dove vogliamo fare il bordo delle colonne e impostare come sfondo l'immagine che automaticamente (se non diversamente specificato) si moltiplica in orizzontale e verticale (ma essendo di larghezza del div si vedrebbe solo l'estensione in verticale).
ciao,
riesci a postare un esempio pratico? :fonzie:
 

jonny

Nuovo Utente
4 Dic 2003
7
0
0
Sinceramente non capisco come il tuo esempio possa calzare con la richiesta. Si parla dell'altezza di 4/5/6...10 div posti uno accanto all'altro e di fare in modo che questi div abbiano tutti la stessa altezza e che questa altezza corrisponda a quella del box con altezza maggiore.Boh.:crying:
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Ma infatti questa soluzione non crea colonne di altezza uguale, le simula con un'immagine ripetuta in verticale.
Il fatto è che proprio non ha senso avere delle colonne della stessa identica altezza (che comunque puoi fare impostando un'altezza in pixel).
Se magari ci scrivi qualche informazione in più sul contenuto che vuoi utilizzare, oppure ancora meglio sarebbe l'idea di quello che vuoi realizzare.

- Se sono rappresentazioni di dati tabellari (allora sarebbe ottima una tabella per l'appunto).
- Se devi fare un blog.
- Se devi fare un sito che apparte le colonne richiede dei contenuti particolari.

Ciau ^^
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Problema altezza div automatica HTML e CSS 12
F [HTML] pagina non scorre e div sotto l'altezza del browser non si vedono HTML e CSS 3
trattorino [Javascript] Blocco div in base all'altezza Javascript 1
F [Javascript] Div ed iframe che adatta altezza in base al contenuto Javascript 1
I spostare div in base all'altezza dello scroll della pagina Javascript 1
M CSS...dinamico? Altezza div variabile, ma con immagine come bordo HTML e CSS 4
catellostefano affiancare div, con altezza variabile HTML e CSS 3
F Div con stessa altezza Javascript 0
E medesima altezza per i DIV di una pagina jQuery 0
S altezza div HTML e CSS 1
G Altezza div HTML e CSS 6
borgo italia div ad altezza variabile ma fissa HTML e CSS 2
M altezza div 100% HTML e CSS 0
G altezza di un div che contiene 2 div float:left HTML e CSS 6
Eugene Altezza minima di un div HTML e CSS 2
Eugene Altezza div con IE HTML e CSS 4
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2

Discussioni simili