Forum PHP.pl > [HTML]Wyrównanie wysokości dwóch kolumn

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML]Wyrównanie wysokości dwóch kolumn

ZenekN

15.11.2012, 09:50:38

Witam mam problem,

mianowicie mam container a w nim dwa contenty o określonych wysokościach w procentach.

czyli:

http://jsfiddle.net/UZwcz/

[HTML] pobierz, plaintext 
    <div id="container" style="width: 244px; height: 100%; border: 2px solid black; padding-bottom:10px; float: left;">
 
    <div id="kolumna 1" style="float: left; width: 100px; height: 100%; border: 2px solid red; padding-bottom:10px;">
    Mniejsza zawartość diva<br/>
    Mniejsza zawartość diva<br/>
    Mniejsza zawartość diva<br/>
    Mniejsza zawartość diva<br/></div>
 
 
    <div id="kolumna 2" style="float: left; width: 100px; height: 100%; border: 2px solid green; padding-bottom:10px; ">
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/>
    Większa zawartość diva<br/></div>
 
    </div>
[HTML] pobierz, plaintext

A teraz chciałbym aby container z mniejszą zawartością diva zwiększał swoją wysokość względem zawartości diva z większą zawartością.

Czyli aby ze względu na większą wysokość diva, dwie kolumny miały cały czas jednakowe wysokości wzdlędem zmiennej zawartości.

Pozdrawiam

fate

15.11.2012, 11:06:59

nie mam na tym kompie zakładki zeby podeslac ci fany link ale sekwencja tych parametrów CSS:

[PHP] pobierz, plaintext 
height: auto;
overflow:auto;
[PHP] pobierz, plaintext

rozszerzy Ci DIVa do kontenera i odkąd tego się nauczyłem wszystkie bolączki poprawiłem i zap[omniałem o ciernistej drodze z rozjezdzajaca sie strona.

ZenekN

15.11.2012, 13:42:02

Dziękuje za odpowiedź ale to nie o to chodzi chciałbym aby automatycznie dwie kolumny zmieniały swoją wysokość według zmiany zawartości, i wyrównywały się do jednakowej wysokości czyli jak jest podane w linku aby div z czerwoną ramką miał taką samą wysokość jak div z zieloną ramką.

http://jsfiddle.net/UZwcz/

b4rt3kk

15.11.2012, 13:57:28

To załatwi sprawę:

[HTML] pobierz, plaintext 
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
	var rightHeight = $('.right').height();	
	var leftHeight = $('.left').height();
	if (rightHeight>leftHeight) $('.left').height(rightHeight); else $('.right').height(leftHeight);
});
</script>
<style type="text/css">
.container {
	width: 400px;
	margin: auto;	
}
.left{
	float: left;
	background: red;
	width: 200px;
}
.right{
	float: right;
	background: green;
	width: 200px;
}
.clear { clear: both; }
</style>
</head>
 
<div class="container">
<div class="left">lewy</div>
<div class="right">prawy<br/>prawy<br/>prawy<br/>prawy<br/></div>
<div class="clear"></div>
</div>
[HTML] pobierz, plaintext

!*!

15.11.2012, 14:03:32

http://jsfiddle.net/UZwcz/3/

ZenekN

15.11.2012, 15:19:11

Cytat(!*! @ 15.11.2012, 14:03:32 )

http://jsfiddle.net/UZwcz/3/

- haha lol!

Dziękuję wszystkim za pomoc,
b4rt3kk, również bardzo dziękuję muszę trochę poćwiczyć javascript!

Pozdrawiam

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.