Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Height 100% - za krótki div w ff i ie7 a pod ie6 jest ok
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
MOniToR
28.12.2007, 00:51:16
Jak w temacie. Chcę aby w tym szablonie div z zawartością strony i innym tłem rozciągał się do samego dołu strony, gdzie jest stopka.
Bardzo dobrze wszystko się rozciąga gdy zawartość strony jest na tyle długa, że nie ma pustej przestrzeni, jednak gdy zawartość strony jest krótka i własnie potrzebne jest takie rozciągniecie to ukazuje się ono tylko w IE6. Proszę o pomoc. 

[HTML] pobierz, plaintext 
  1. <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml"
  5. xml:lang="<?php echo $this->language; ?>"
  6. lang="<?php echo $this->language; ?>" >
  7. <head>
  8. <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
  9. </head>
  10. <body>
  11.  
  12. <div id="wrapper"><div id="centercontent">
  13. <div class="insidecenter">
  14. <div id="main">
  15. TUTAJ JEST ZAWARTOSC
  16. </div>
  17. </div></div><div id="header">
  18. TUTAJ JEST HEADER Z LOGIEM
  19. </div>
  20. <div id="sitename">&nbsp; &nbsp; &nbsp; &nbsp; tutaj wyświetla się nazwa strony
  21. </div>
  22. <div id="leftcontent">
  23. LEWA KOLUMNA
  24. </div><div id="rightcontent">
  25. PRAWA KOLUMNA
  26. </div>
  27. <div id="clearfooter"></div> 
  28. </div>
  29. <div id="footer">
  30. TRESC STOPKI
  31. </div>
  32.  </body>
  33. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. * {
  2. 	margin: 0;
  3. }
  4. body {
  5.     margin: 0 auto;
  6.     padding: 0px;
  7.     font-family: Tahoma;
  8.     font-size: 11px;
  9.     text-align: center;
  10.     background-color: #000000;
  11.     color: #949494;
  12.     height:100% ;
  13.     text-align:center;
  14. }
  15. html, body{height:100%;}  
  16.  
  17. #wrapper {
  18.     position: relative;
  19.     width: 850px;
  20.     background-image: url('../images/all_bg.jpg');
  21.     background-repeat: repeat-y;
  22.     margin: 0 auto;
  23.     min-height: 100%;
  24.     height: auto  !important;
  25.     height: 100%;
  26.     margin-bottom:-19px;
  27. }
  28.  
  29. #header {
  30.     background-image: url('../images/top.jpg');
  31.     background-repeat: no-repeat;
  32.     position: absolute;
  33.     width: 822px;
  34.     height: 105px;
  35.     margin: 0 auto;
  36.     top: 0px;  
  37.     padding-bottom:80px;
  38.     margin-left: -411px;
  39.     left:50%;
  40. }
  41.  
  42. #leftcontent {
  43.     position: absolute;
  44.     height: auto;
  45.     left: 8px;
  46.     top: 130px;
  47.     width: 171px;
  48.     padding: 5px;
  49.     text-align: left;
  50. }
  51.  
  52. #sitename {
  53.     position: absolute;
  54.     width: 822px;
  55.     height: 16px;
  56.     margin: 0 auto;
  57.     margin-top: 106px;
  58.     top: 1px;
  59.     background-image: url('../images/top_path_bg.jpg');
  60.     background-repeat: repeat-x;
  61.     text-align: left;
  62.     padding-top: 5px;
  63.     margin-left: -411px;
  64.     left:50%;
  65. }
  66.  
  67. #centercontent {
  68.     text-align: left;
  69.     margin-left: 183px;
  70.     margin-right: 183px;
  71.     height:100%; 
  72.     min-height:100%;
  73. }
  74.  
  75. #rightcontent {
  76.     position: absolute;
  77.     right: 8px;
  78.     top: 130px;
  79.     width: 171px;
  80.     padding: 5px;
  81.     text-align: left;
  82. }
  83.  
  84. .insidecenter {
  85.     text-align: center;
  86.     padding: 100px 0 0 0;
  87.     height:100%; 
  88.     min-height:100%; 
  89. }
  90.  
  91. #main {
  92.     margin: 2px auto;
  93.     margin-top: 0px;
  94.     padding: 5px;
  95.     width: 463px;
  96.     background-color: #2D2D2D;
  97.     min-height: 100%;
  98.     height: auto !important;
  99.     height: 100%;
  100.     position:static;
  101. }
  102.  
  103. .footer {
  104.     background-image: url('../images/footer_bg.jpg');
  105.     background-repeat: repeat-x;
  106.     height: 19px;
  107.     width: 822px;
  108.     margin: 0 auto;
  109.     margin-left: -411px;
  110.     left:50%;
  111.     position:relative;
  112.     text-align: center;
  113.     padding-top: 4px;
  114.     color: #454545;
  115.     bottom:0px;
  116. }
  117.  
  118. #clearfooter {
  119.     height:19px;
  120. }
[HTML] pobierz, plaintext


To nie jest chyba taki prosty szablon i chyba nie będzie takie proste mi pomóc. Jeżeli kogos to jest to kawałek mojego szablonu pod joomle. Przykład online: http://j15.dev.mamboassistance.com
vokiel
28.12.2007, 08:04:51
może to Ci pomoże: Sticky-footer
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.