Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS] Problem z tlem div-a
lukash82
post
Post #1





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

Ostrzeżenie: (0%)
-----


Witam. Mam takie pytanie odnośnie robienia tła w div-ie dla strony www. Mam głównego div-a "strona" oraz dwa div-y w nim czyli "lewa" i "prawa". I teraz pytanko. Jak zrobić aby tło lewej strony miało wysokość 100% wysokości strony. Nawet wtedy gdy zawartość jej jest dużo większa niż wysokość strony. Dla przykładu główny div:
"strona" jest zielony,
"lewy" jest czerwony,
"prawy" jest żółty.

Wszystko działa pod IE o dziwo (ale to pewnie przez przypadek...(IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Niestety w reszcie tych porządniejszych przeglądarek nie działa to tak jakbym chciał. Mój kod dla przykładu:
  1. body{
  2. margin : 0px;
  3. padding : 0px;
  4. }
  5. #strona{
  6. margin : 0px;
  7. padding : 0px;
  8. width : 960px;
  9. background-color : green;
  10. float : left;
  11. height : 100%;
  12. }
  13. #strona .lewa{
  14. margin : 0px;
  15. width : 400px;
  16. float : left;
  17. background-color : red;
  18. }
  19. #strona .prawa{
  20. margin : 0px;
  21. padding : 0px;
  22. width : 560px;
  23. float : right;
  24. background-color : yellow;
  25. }
  26. <div id="strona">
  27. <div class="lewa">
  28. lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />
  29. </div>
  30. <div class="prawa">
  31. prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />
  32. </div>
  33. </div>

Próbowałem już na różne sposoby ale bez powodzenia. Chciałem podłożyc obrazek pod główny div "strona" ale działa to tylko jeśli zawartość strony mieści się na wysokość ekranu. Po dodaniu większej ilości treści do którejś ze stron robią się klocki w FF i innych oprócz IE. Ogólnie efekt jaki chce uzyskać działa właśnie pod IE. Jak zrobić to w FF, etc.? Jeśli wiecie to dajcie znać lub napiszcie jakieś pomysły. Pozdrawiam, Łukasz.
Go to the top of the page
+Quote Post
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Cytat
Nawet wtedy gdy zawartość jej jest dużo większa niż wysokość strony. Dla przykładu główny div:
"strona" jest zielony,
"lewy" jest czerwony,
"prawy" jest żółty.

Trochę nie skumałem; podrzuciłbyś screena?

Jeśli pomoże: http://www.alistapart.com/articles/holygrail
Go to the top of the page
+Quote Post
lukash82
post
Post #3





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

Ostrzeżenie: (0%)
-----


Witam. No może rzeczywiście trochę zamotałem się w opisie. Spróbuje jeszcze raz;) A więc mam jeden główny div i w nim dwie kolumny (div lewy i prawy). Obydwie kolumny wypełniają w całości tego głównego div-a. Przyjmijmy, ze jedna ma być czerwona a druga biała (jak flaga;). I teraz:
  • gdy zawartość ich jest mniejsza niż wysokość ekranu div jest rozciągnięty na całą wysokość ekranu i mamy taka odwrócona flagę...
  • gdy zawartość którejkolwiek kolumny jest większa niż wysokość ekranu i włączy się boczny pasek przewijania w przeglądarce to również mamy tło na całej wysokości ekranu, a nie tylko do wysokości krótszej kolumny...
Można to zobaczyć na przykładzie jaki zamieściłem w poprzednim poscie. W IE jest OK, w innych przeglądarkach nie działa...:/
Go to the top of the page
+Quote Post
erix
post
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Co do tła - celowo podałem linka do A list apart.

google: 100% height div CSS...
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 22.08.2025 - 21:48