Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML]Wyrównanie wysokości dwóch kolumn
ZenekN
post
Post #1





Grupa: Zarejestrowani
Postów: 419
Pomógł: 5
Dołączył: 7.08.2012

Ostrzeżenie: (0%)
-----

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 
  1.     <div id="container" style="width: 244px; height: 100%; border: 2px solid black; padding-bottom:10px; float: left;">
  2.  
  3.     <div id="kolumna 1" style="float: left; width: 100px; height: 100%; border: 2px solid red; padding-bottom:10px;">
  4.     Mniejsza zawartość diva<br/>
  5.     Mniejsza zawartość diva<br/>
  6.     Mniejsza zawartość diva<br/>
  7.     Mniejsza zawartość diva<br/></div>
  8.  
  9.  
  10.     <div id="kolumna 2" style="float: left; width: 100px; height: 100%; border: 2px solid green; padding-bottom:10px; ">
  11.     Większa zawartość diva<br/>
  12.     Większa zawartość diva<br/>
  13.     Większa zawartość diva<br/>
  14.     Większa zawartość diva<br/>
  15.     Większa zawartość diva<br/>
  16.     Większa zawartość diva<br/>
  17.     Większa zawartość diva<br/>
  18.     Większa zawartość diva<br/>
  19.     Większa zawartość diva<br/>
  20.     Większa zawartość diva<br/>
  21.     Większa zawartość diva<br/>
  22.     Większa zawartość diva<br/>
  23.     Większa zawartość diva<br/></div>
  24.  
  25.     </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

Ten post edytował ZenekN 15.11.2012, 10:50:22
Go to the top of the page
+Quote Post
fate
post
Post #2





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

nie mam na tym kompie zakładki zeby podeslac ci fany link ale sekwencja tych parametrów CSS:
[PHP] pobierz, plaintext 
  1. height: auto;
  2. 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.

Ten post edytował fate 15.11.2012, 11:10:22


--------------------
Sklep ubrania lniane dla dzieci promocje
Go to the top of the page
+Quote Post
ZenekN
post
Post #3





Grupa: Zarejestrowani
Postów: 419
Pomógł: 5
Dołączył: 7.08.2012

Ostrzeżenie: (0%)
-----

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/

Ten post edytował ZenekN 15.11.2012, 13:43:21
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

To załatwi sprawę:

[HTML] pobierz, plaintext 
  1. <head>
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  3. <script type="text/javascript">
  4. $(function(){
  5. 	var rightHeight = $('.right').height();	
  6. 	var leftHeight = $('.left').height();
  7. 	if (rightHeight>leftHeight) $('.left').height(rightHeight); else $('.right').height(leftHeight);
  8. });
  9. </script>
  10. <style type="text/css">
  11. .container {
  12. 	width: 400px;
  13. 	margin: auto;	
  14. }
  15. .left{
  16. 	float: left;
  17. 	background: red;
  18. 	width: 200px;
  19. }
  20. .right{
  21. 	float: right;
  22. 	background: green;
  23. 	width: 200px;
  24. }
  25. .clear { clear: both; }
  26. </style>
  27. </head>
  28.  
  29. <div class="container">
  30. <div class="left">lewy</div>
  31. <div class="right">prawy<br/>prawy<br/>prawy<br/>prawy<br/></div>
  32. <div class="clear"></div>
  33. </div>
[HTML] pobierz, plaintext


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
!*!
post
Post #5





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----

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


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
ZenekN
post
Post #6





Grupa: Zarejestrowani
Postów: 419
Pomógł: 5
Dołączył: 7.08.2012

Ostrzeżenie: (0%)
-----

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

Ten post edytował ZenekN 15.11.2012, 15:19:37
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 12:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn