Jedną z najtrudniejszych rzeczy w nowoczesnym projektowaniu stron internetowych jest utworzenie dwóch (lub więcej) układów kolumn, w których wszystkie kolumny mają jednakową wysokość. Wyruszyłem w poszukiwaniu sposobu na zrobienie tego w czystym CSS.
Można to najprościej osiągnąć, używając obrazu tła w opakowaniu-div, który zawiera obie kolumny (lub tło strony).
Można to również zrobić, używając komórek tabeli CSS, ale niestety obsługa przeglądarki jest nadal nieczytelna, więc nie jest to preferowane rozwiązanie. Czytaj dalej, jest lepszy sposób.
Znalazłem inspirację z dwóch stron w Internecie, chociaż wolę moje rozwiązanie, ponieważ daje mi to więcej swobody w użyciu zaokrąglonych narożników i precyzyjnych szerokości lub układów procentowych, i łatwiej jest edytować, końcowy układ trzyma div nie zmusza cię do wykonywania ujemnego skracania liczb.
== Trick: ==
Najpierw trzeba stworzyć cols wzór tła, a następnie umieścić pełną szerokość div, który może pomieścić regularne treści. Sztuka polega na przesuwanych kolumnach w kolumnach, tworząc efekt wypychania na wszystkich kolumnach nadrzędnych, gdy zawartość rozszerza się, bez względu na to, która kolumna końcowa jest najdłuższa.
W tym przykładzie użyję siatki 2 kolumn w środkowym opakowaniu-div z zaokrąglonymi narożnikami. Próbowałem zachować fluff na łatwe kopiowanie i wklejanie.
== Krok 1 ==
Utwórz podstawową stronę internetową.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
== Krok 2 ==
Tworzenie jeden płynął div wewnątrz innego płynął div. Następnie zastosuj ujemny margines na wewnętrznym elemencie div, aby wizualnie go wyskoczyć z ramki. Dodałem przerywane granice dla celów ilustracyjnych. Wiedz, że jeśli wypłyniesz na zewnątrz div po lewej stronie i wprowadzisz wewnątrz div lewy margines w lewo, wewnętrzny div przejdzie pod krawędzią strony, nie dając paska przewijania.
<!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>
== Krok 3 ==
W środku div: Tworzenie div, bez tła, który ma ze wszystkich kolumn połączone. Przesunie się przez krawędź wewnętrznego elementu div. Dodałem przerywaną ramkę do celów ilustracyjnych. Będzie to płótno dla twoich treści.
<!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>
== Krok 4 ==
Dodaj swoją treść. W tym przykładzie umieszczam dwa elementy div, które są umieszczone nad układem. Zabrałem też przerywane granice. Presto, to wszystko. Możesz użyć tego kodu, jeśli chcesz.
<!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>
== Krok 5 ==
Żeby było ładniej można skupia całą konstrukcję w div oblewania i dać to zaokrąglone narożniki. Zaokrąglone rogi nie będą wyświetlane w starym IE, chyba że użyjesz do tego specjalnej poprawki.
<!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>
== Źródła == Inspiration
Quentin, to NIE jest duplikat. Mój kod został INSPIROWANY przez (między innymi) http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks, ale został dodatkowo uproszczony i zmieniony, chociaż nie pamiętam dokładnie, co różnica polega na tym, że dawno temu to napisałem. – Paul
Skorzystaj z tej strony dla tego rodzaju problemu: http://callmenick.com/post/css-equal-height-columns-three-different-ways –