Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: automatycznie dopasowana wysokosc diva
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
elem323
24.07.2009, 09:40:24
Witam, tak jak w temacie.. nie wiem czy znajdzie sie odwazny zeby sie z tym zmiezyc, bo problem raczej ciezki. Ponizej kod. dziala w IE6, FF3, nie dizla w IE7, IE8, Safari4


[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  5. <head>
  6.  
  7. </head>
  8.  
  9. <body>
  10. <div style="background:#99FF00; width:400px; overflow:hidden; height:100%; display:table">
  11.  
  12. 	<div style="float:left; width:200px; display:table; height:100%; background:#eaeaea;">
  13. 		This design uses a defined body height of 100% which allows setting the contained left and right divs at 100% height.
  14. 	</div>
  15. 	<div style="float:left; width:200px; display:table; overflow:hidden; background:#990000">
  16. 		contained left and right divs at 100% height. This design uses a defined body height of 100% which allows setting the
  17. 		contained left and right divs at 100% height. This design uses a defined body height of 100% which allows setting the
  18. 		contained left and right divs at 100% height. This design uses a defined body height of 100% which allows setting the
  19. 		contained left and right divs at 100% height. This design uses a defined body height of 100% which allows setting the
  20. 	</div>
  21.  
  22. </div>
  23.  
  24. </body>
  25. </html>
[HTML] pobierz, plaintext
drake88
24.07.2009, 09:44:32
Zamień height: 100% na height: auto
elem323
24.07.2009, 09:53:29
niestety az tak proste to nie jest ..jak dam height:auto, to juz niegdzie nie dziala
Daiquiri
24.07.2009, 10:02:04
dodaj position:fixed; w zielonym divie smile.gif
elem323
24.07.2009, 10:10:26
chlopaki, nie robmy zgadywanki, no baredzo was prosze. Najpierw sprawdzic potem odpowiedziec.
Ale dzieki kazdemu ktos sprobuje.
Daiquiri
24.07.2009, 10:16:48
Poprawiłam tak, żeby działało tak samo pod IE6 jak i FF3 (u mnie różnica polega na tym, że pod IE zielony div rozciąga się do końca strony, zaś w FF jest niewidoczny). Więc uwierz mi, że nie strzelam, tylko sprawdzałam. Wklej chociaż prowizorycznie co chcesz osiągnąć np. za pomocą *jpg.
elem323
24.07.2009, 10:19:55
dokladnie to co jest na FF3, tzn, w czerwonego Dive wpisuje tyle tekstu ile tylko chce, a div szary zawsze doasuje swoja wysokosc do wysokosci diva czerwonego
Daiquiri
24.07.2009, 10:43:04
POD IE8 działa (nie wiem jak Safari i IE7) - nie mam możliwości sprawdzenia.

[HTML] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  2. <head>
  3. <style media="screen" type="text/css">
  4. /* <!-- */
  5. body {
  6.     margin:0;
  7.     padding:0;
  8. }
  9.  
  10.  
  11. #container2 {
  12.     clear:left;
  13.     float:left;
  14.     width:100%;
  15.     overflow:hidden;
  16.     background:#990000; 
  17. }
  18. #container1 {
  19.     float:left;
  20.     width:100%;
  21.     position:relative;
  22.     right:50%;
  23.     background:#eaeaea; 
  24. }
  25. #col1 {
  26.     float:left;
  27.     width:46%;
  28.     position:relative;
  29.     left:52%;
  30.     overflow:hidden;
  31. }
  32. #col2 {
  33.     float:left;
  34.     width:46%;
  35.     position:relative;
  36.     left:56%;
  37.     overflow:hidden;
  38. }
  39.  
  40.     </style>
  41. </head>
  42.  
  43. <body>
  44.  
  45. <div id="container2">
  46.     <div id="container1">
  47.         <div id="col1">
  48.  
  49. This design uses a defined body height of 100% which allows setting the contained left and right divs at 100% height.
  50.  
  51.         </div>
  52.         <div id="col2">
  53.  
  54. contained left and right divs at 100% height. This design uses a defined body height of 100% which allows setting the
  55. contained left and right divs at 100% height. This design uses a defined body height of 100% which allows setting the
  56. contained left and right divs at 100% height. This design uses a defined body height of 100% which allows setting the
  57. contained left and right divs at 100% height. This design uses a defined body height of 100% which allows setting the
  58.  
  59.         </div>
  60.     </div>
  61. </div>
  62.  
  63.  
  64.  
  65.  
  66. </body>
  67. </html>
[HTML] pobierz, plaintext


Polecam! smile.gif
elem323
24.07.2009, 10:48:47
Daiquiri,naprawde dobry jestes.. musisz miec niezle doswiadczenie. Wielkie dzieki, pomogles exclamation.gif!
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.