Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z DIVem - tlo nie jest na calej wysokosci
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
marianekxx
Witam.
Mam problem z DIVem - tlo i obrys nie jest na calej wysokosci - tylko do wysokosci okna przegladarki - po przwinieciu na dol juz nie ma tla ani obrysu.

Kod html.
  1. <div id="header1">
  2. <div id="top_szary_pasek"> </div>
  3. <div id="menu1"> </div>
  4. </div>
  5.  
  6. <div id="main" class="col">
  7. <div class="wrap">
  8. <div class="left_2">lewa </div> <!-- koniec .left -->
  9. <div class="right_2"></div> <!-- koniec .right -->
  10. </div> <!-- koniec .wrap -->
  11. </div> <!-- koniec .main -->
  12. <div class="clear"></div>
  13.  
  14. <div id="footer1"></div>


Kod .css
  1. #header1 {
  2. background: #3c3c3c url(imgs/tlo.png) repeat-x center center;
  3. width: 100%;
  4. position: top;
  5. z-index: 9999;
  6. }
  7. #menu1 {
  8. width: 960px;
  9. height: 80px;
  10. margin: 0 auto;
  11. }
  12.  
  13. #main {
  14. padding-bottom: 319px;
  15. width: 960px;
  16. background-color: #ffffff;
  17. margin: 0 auto;
  18. height:100%;
  19. padding:0 10px 0 10px; border-left: 1px solid #b5b5b5;border-right: 1px solid #b5b5b5;
  20.  
  21. }
  22. #main .col{
  23. background-color: #ffffff;
  24. height:100%;
  25. }
  26. #main .wrap {
  27. width:960px;
  28. background-color: #ffffff;
  29. }
  30.  
  31. #main .left_2 {
  32. float:left;
  33. width:650px;
  34. position:relative;
  35. top:5px;
  36. }
  37.  
  38. #main .right_2 {
  39. float:left;
  40. width:300px;
  41. margin-left:10px;
  42. margin-bottom:35px;
  43. }
  44.  
  45. #footer1 {
  46. width: 100%;
  47. margin: 0 auto;
  48. overflow: hidden;
  49. border-top: 6px solid #dcdcdc;
  50. background: #3c3c3c url(imgs/footer-content-bg.jpg) repeat top left;
  51. }
  52.  


Ogolnie strona wyglada tak ze header i footer sa calej szerkosci przegladarki - zas MAIN ma szerokosc 960px - i problem w tym ze tresc znajdujaca sie czy to w prawej czy lewej kolumnie (left_2 i right2) wyplenia cala warstwe nie nachodzac na stopke - tylko ze tlo i obrys warstwy MAIN niestety ale jest tylko do wysokosci wczytania w przegladarce jak przewine nizej to nie ma juz ani tla ani obrysu.

Z gory wielkie dzieki za pomoc.
Kostek.88
A nie mozesz po prostu pozwolic DIVowi sie rozciagnac do ilosci tekstu w nim? Jesli zalezy Ci na przylegajacej stopce do dolu (jesli tekstu jest malo), to polecam ten przyklad http://ryanfait.com/sticky-footer/ .

I niestety jak wpiszesz height: 100% to punktem odniesienia bedzie tyle ile widzisz na ekranie...
Volume
temat wałkowany 1000 razy, na upartego można to osiągnąć oczywiście im lepsze wsparcie dla css2.1 tym lepiej, dla IE6 były jakies tricki... Ale po co? Większość osob daruje sobie tą tabelkowata możliwość, z czasem jak strone wypełniasz treścią to ten efekt kompletnie jest zbędny, a nawet jak zdarzy sie krótka treść to mało kompu będzie przeszkadzać, że stopka się oderwie od dołu przeglądarki.

edit - a co do tego bys mial rowny obrys tla to dla glownego bloku albo stosujesz obrazek w tle - 1px x szerokość i dajesz repeat-y albo w CSS3 bawisz sie
Kod
background: -o-linear-gradient(0deg, yellow 50%, blue 50%);
background: -moz-linear-gradient(0deg, yellow 50%, blue 50%);
background: -webkit-linear-gradient(0deg, yellow 50%, blue 50%);
background: linear-gradient(0deg, yellow 50%, blue 50%);
erix
Prefiks -o jest tylko dla Opery, gwoli ścisłości.
Volume
tak zagadza sie nadpisałem pozostałe istotne prefiksy
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.