Van egy kódom. Van benne egy kötelezően fix magasságú 'nagy háttérkép' DIV-em (itt az egyszerűség kedvéért piros) és egy olyan alsó háttérkép DIV-em (ez pedig sárga), amely kitölti a fentmaradt teret (tehát ha változtatgatom az ablak magasságát vagy a képernyő felbontását akkor is).
Ha a tartalom (itt kék) DIV magassága nem ér túl az alsó háttéren, akkor az alsó háttér DIV "hozzáragad" a böngésző aljához (ahogy akartam): felbontástól és ablakmérettől függetlenül mindig a leér a böngésző aljáig.
Sajnos, ha a tartalom DIV-be túl sok minden kerül (beszúrtok még vagy 50 sort) akkor túlnyúlik a sárga alján (megjelenik alatta egy fehér rész), akkor a sárga DIV már nem ér le a böngésző aljáig.
Hogyan lehet ezt a problémát megoldani? Nem jó ha a BODY-nak is ilyen háttérszínt adok, mert itt ismétlődő háttér lesz.
Kód:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h ... strict.dtd"> <html> <head> <title>Weblap struktúra</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body style="margin: 0; padding: 0; text-align: center"> <div style="width: 100%; height: 600px; margin: 0 auto; background-color: red;">Nagy háttérkép (no-repeat)</div> <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 600px; width: 100%; margin: 0 auto; background-color: yellow;">Alsó háttérkép (repeat)</div> <div style="position: absolute; width: 700px; left: 0px; right: 0px; top: 50px; margin: 0px auto; background-color: blue"> 1. Weboldal tartalom (eredetileg background-color: transparent)<BR> 2. Weboldal tartalom<BR> 3. Weboldal tartalom<BR> 4. Weboldal tartalom<BR> 5. Weboldal tartalom<BR> 6. Weboldal tartalom<BR> 7. Weboldal tartalom<BR> 8. Weboldal tartalom<BR> 9. Weboldal tartalom<BR> 10. Weboldal tartalom<BR> 11. Weboldal tartalom<BR> 12. Weboldal tartalom<BR> 13. Weboldal tartalom<BR> 14. Weboldal tartalom<BR> 15. Weboldal tartalom<BR> </div> </body> </html>
Hasonló témák:
Könyvjelzők