Una delle cose complicate del web design moderno è creare un layout a due (o più) colonne in cui tutte le colonne abbiano la stessa altezza. Ho iniziato una ricerca per trovare un modo per farlo in puro CSS.
È possibile farlo più facilmente utilizzando un'immagine di sfondo in un wrap-div che contiene entrambe le colonne (o lo sfondo della pagina).
È anche possibile farlo utilizzando le celle di tabella CSS, ma sfortunatamente il supporto del browser per questo è ancora ombreggiato, quindi non è una soluzione preferita. Continua a leggere, c'è un modo migliore.
Ho trovato la mia ispirazione da due pagine sul web, anche se preferisco la mia soluzione, dal momento che mi dà più libertà di usare angoli arrotondati e precise larghezze o percentuali, ed è più facile da modificare, il layout finale tenendo div non ti costringe a fare numeri negativi.
== Il trucco: ==
In primo luogo si creano i colli sfondo di progettazione, poi si mette un div larghezza che può contenere i tuoi contenuti regolare. Il trucco riguarda le colonne fluttuanti all'interno di colonne, creando un effetto push su tutte le colonne principali quando il contenuto si estende in lunghezza, indipendentemente dalla colonna finale più lunga.
In questo esempio userò una griglia a 2 colonne in un wrap-div centrato con angoli arrotondati. Ho cercato di mantenere il fluff fuori per un facile copia-incolla.
== Fase 1 ==
Crea la tua pagina Web di base.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
== Fase 2 ==
crearne uno galleggiare all'interno di un altro div div galleggiare. Quindi applica un margine negativo sul div interno per farla uscire visivamente dalla sua cornice. Ho aggiunto bordi punteggiati per scopi illustrativi. Sappi che se si sposta il div esterno verso sinistra e si lascia il margine interno a sinistra, il div interno andrà sotto il bordo della pagina senza darti una barra di scorrimento.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
this content obviously only fits the left column for now.
</div>
</div>
</body>
</html>
Passo == 3 ==
Nella div all'interno: Creare un div senza fondo che ha la con di tutte le colonne combinati. Spingerà oltre il bordo del div interno. Ho aggiunto un bordo tratteggiato per scopi illustrativi. Questo sarà il quadro per il tuo contenuto.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
float:left;
width:400px;
border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
this content spans over both columns now.
</div>
</div>
</div>
</body>
</html>
== Fase 4 ==
aggiungere i tuoi contenuti. In questo esempio metto due div che sono posizionati sopra il layout. Ho anche portato via i bordi tratteggiati. Presto, è tutto. Puoi usare questo codice se vuoi.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</body>
</html>
== Fase 5 ==
Per rendere più bello si può centrato l'intero progetto in un div involucro e dargli angoli arrotondati. Gli angoli arrotondati non verranno visualizzati nel vecchio IE a meno che non si utilizzi una correzione speciale per questo.
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
position:relative;
width:500px;
margin:20px auto;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</div>
</body>
</html>
== fonti di ispirazione ==
Quentin, Questo NON è un duplicato. Il mio codice è stato ISPIRATO da (tra gli altri) http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks ma è ulteriormente semplificato e modificato, anche se non ricordo esattamente cosa la differenza è che molto tempo fa l'ho scritto. – Paul
Usa questo sito per questo tipo di problema: http://callmenick.com/post/css-equal-height-columns-three-different-ways –