Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Dwa divy obok siebie, jak zrobić aby miały taką samą wysokość
Forum PHP.pl > Forum > Przedszkole
dk1342
23.08.2011, 21:12:46
Witam wszystkich, otóż mój problem jest taki: Mam stronę podzieloną na dwa divy. Jeden jest szerszy (tresc), drugi węższy (np na panele). I sprawa jest taka, że mam więcej treści w divie tym po lewej (szerszym) niż w tym po prawej, natomiast chce aby ten div po prawej też szedł do samego dołu, dorównując temu po lewej. Wiem, że mogę to zrobić dając na stałe height obu divom ale takiego rozwiązania jednak nie chce, bo wysokość będzie różna-dynamiczna. Jak mogę rozwiązać ten problem, aby drugi div dorównywał pierwszemu, nie ustalając height na stałe ?

Przykład obrazkowy:

Tak jest:


Tak chciałbym:


Przykładowy kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Test</title>
  4. <style type="text/css">
  5. #srodek
  6. {
  7. 	width: 500px;
  8. 	margin: auto;
  9. 	border: 1px solid #000;
  10. }
  11. #lewa
  12. {
  13.     width: 300px;
  14. 	float: left;
  15. 	background: #ccc;
  16. }
  17. #prawa
  18. {
  19.    width: 200px;
  20.    float: left;
  21.    background: #000;
  22.    color: #fff;
  23. }
  24. .cleared
  25. {
  26. 	float: none;
  27. 	clear: both;
  28. 	margin: 0;
  29. 	padding: 0;
  30. 	border: none;
  31. 	font-size:1px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="srodek">
  37. <div id="lewa">
  38. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  39. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  40. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  41. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  42. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  43. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  44. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 			
  45. </div>
  46. <div id="prawa">
  47. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
  48. </div>
  49. <div class="cleared"></div>
  50. </div>
  51. </body>
  52. </html>
[HTML] pobierz, plaintext
tolomei
23.08.2011, 21:22:26
jQuery:

[HTML] pobierz, plaintext 
  1. <head>
  2.    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  3.    <script type="text/javascript">
  4.       $(function(){
  5.          var wysokosc = $("div#lewa").height();
  6.          $("div#prawa").css("height",wysokosc+"px");
  7.       });
  8.    </script>
  9. </head>
[HTML] pobierz, plaintext


Możesz także ściągnąć skrypt źródłowy i załadować z dysku serwera.

Pozdro
dk1342
23.08.2011, 21:26:00
Też myślałem o js. Jednak akurat w tym przypadku potrzebne mi to jest do tworzenia aukcji na allegro a tam niestety zabronione js. Jest w ogóle taka możliwość bez JS'a ?
boro11
23.08.2011, 21:45:55
Da się zrobić coś takiego w CSS'ie

Wystarczy zrobić obrazek tła po lewej który będzie szaro-czarny. I on będzie "robił" za to tło czarne. Gdzie widziałem tutorial do tego jak miałem podobny problem ale niestety nie jestem w stanie sobie przypomnieć gdzie.

Daj im z-index: 1; i dla tego po prawej 2 i powinno śmigać smile.gif

A to tak na szybko znalezione:
http://www.dictum.netlook.pl/blog/?p=6

Nie testowałem tego i jest dosyć dziwne ale kto wie może nawet działa, nie mniej jednak polecam pierwszą metodę.
tolomei
23.08.2011, 21:46:00 
[HTML] pobierz, plaintext 
  1. <div id="srodek"> 
  2.     <div id="lewy">bla bla<br /> bla bla <br />bla bla <br />bla bla bla bla bla <br />bla bla bla bla bla </div> 
  3.    <div id="prawy">bla bla bla bla </div> 
  4. </div>
[HTML] pobierz, plaintext


CSS:
Kod
#srodek { overflow: hidden; }
#lewy { float: left; background: red; }
#prawy { float: right; background: blue; }
#lewy, #prawy { width: 50%; padding-bottom: 2000px; margin-bottom: -2000px; }


Nie mojego autorstwa - znalazłem w sieci, ale działa smile.gif
dk1342
23.08.2011, 22:02:42
Suuper. Dziękuje.
!*!
24.08.2011, 09:01:42
Może i powyższe metody działają, ale są złe. Można uzyskać to bez konieczności manipulacji marginesem czy szerokością procentową.

Nieinwazyjna wersja CSS:
http://jsfiddle.net/Q48Bv/
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.