Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [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
 
 Start new topic
Odpowiedzi
b4rt3kk
post
Post #2





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
Go to the top of the page
+Quote Post

Posty w temacie
- ZenekN   [HTML]Wyrównanie wysokości dwóch kolumn   15.11.2012, 09:50:38
- - fate   nie mam na tym kompie zakładki zeby podeslac ci fa...   15.11.2012, 11:06:59
- - ZenekN   Dziękuje za odpowiedź ale to nie o to chodzi chcia...   15.11.2012, 13:42:02
- - b4rt3kk   To załatwi sprawę: [HTML] pobierz, plaintext ...   15.11.2012, 13:57:28
- - !*!   http://jsfiddle.net/UZwcz/3/   15.11.2012, 14:03:32
- - ZenekN   Cytat(!*! @ 15.11.2012, 14:03...   15.11.2012, 15:19:11

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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