Div altezza automatica

  • Creatore Discussione Creatore Discussione gracito
  • Data di inizio Data di inizio
G

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
 
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.
 
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>
 
gracito ha scritto:
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
Clicca per allargare...


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:
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.
Clicca per allargare...
o posti il codice, o invii all'amministratore un articolo
 
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
 
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).
 
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).
Clicca per allargare...
ciao,
riesci a postare un esempio pratico? :fonzie:
 
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:
 
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 ^^
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

M
Problema altezza div automatica
Risposte
12
Visite
3K
HTML e CSS
criric
criric
F
[HTML] pagina non scorre e div sotto l'altezza del browser non si vedono
Risposte
3
Visite
5K
HTML e CSS
Max 1
Max 1
trattorino
[Javascript] Blocco div in base all'altezza
Risposte
1
Visite
1K
Javascript
lperino096
lperino096
F
[Javascript] Div ed iframe che adatta altezza in base al contenuto
Risposte
1
Visite
2K
Javascript
Max 1
Max 1
I
spostare div in base all'altezza dello scroll della pagina
Risposte
1
Visite
5K
Javascript
Longo8
Longo8
M
CSS...dinamico? Altezza div variabile, ma con immagine come bordo
Risposte
4
Visite
4K
HTML e CSS
Malware
M
catellostefano
affiancare div, con altezza variabile
Risposte
3
Visite
4K
HTML e CSS
catellostefano
catellostefano
F
Div con stessa altezza
Risposte
0
Visite
2K
Javascript
Fxxxx
F
E
medesima altezza per i DIV di una pagina
Risposte
0
Visite
1K
jQuery
emulman
E
S
altezza div
Risposte
1
Visite
2K
HTML e CSS
borgo italia
borgo italia
G
Altezza div
Risposte
6
Visite
2K
HTML e CSS
ghisirds
G
borgo italia
div ad altezza variabile ma fissa
Risposte
2
Visite
3K
HTML e CSS
borgo italia
borgo italia
M
altezza div 100%
Risposte
0
Visite
3K
HTML e CSS
makeart
M
G
altezza di un div che contiene 2 div float:left
Risposte
6
Visite
5K
HTML e CSS
sbobby
sbobby
Eugene
Altezza minima di un div
Risposte
2
Visite
2K
HTML e CSS
Eugene
Eugene
Eugene
Altezza div con IE
Risposte
4
Visite
1K
HTML e CSS
Eugene
Eugene
E
Creare un testo trasparente dietro un div
Risposte
5
Visite
3K
HTML e CSS
WmbertSea
WmbertSea
F
Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni?
Risposte
0
Visite
574
Javascript
fede12
F
M
Accordion menu e posizione div
Risposte
0
Visite
1K
HTML e CSS
miagy
M
P
jquery refresh div non funziona
Risposte
0
Visite
913
Javascript
psicona
P
Alto Basso