Alsó DIV amely mindig kitölti a fennmaradt teret

toldigabor · 2010-07-31, 06:24

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>

benedictus · 2010-07-31, 08:12

sárga: <div style="position: fixed ....
de még lesz min javítanod

Joe · 2010-07-31, 11:00

Szia!

Strukturális átalakítással oldanám meg a dolgot, divek egymásba ágyazásával és nem a pozicionálással, úgy sokkal egyszerűbb.

toldigabor · 2010-07-31, 18:12

Idézet:

benedictus eredeti hozzászólása

sárga: <div style="position: fixed ....
de még lesz min javítanod

Nagyon jó, most már a kék DIV bő tartalma mellett a sárga alja "hozzá ragad", csak ha "lecsuszkázok", akkor most a sárga felett marad ki a fehér rész.

benedictus · 2010-07-31, 20:59

Idézet:

toldigabor eredeti hozzászólása

Nagyon jó, most már a kék DIV bő tartalma mellett a sárga alja "hozzá ragad", csak ha "lecsuszkázok", akkor most a sárga felett marad ki a fehér rész.

jáccál a marginnokkal, nézz utána google-ben

edem · 2010-08-01, 11:45

Szerintem meg töröld az egészet és írjad újra, de úgy, hogy nem inline css-t használsz, hanem külön stíluslapot. Akkor nem lesz ennyire kusza és talán rájösz a hibára is.

toldigabor · 2010-08-02, 09:05

Megcsináltam úgy, hogy töröltem az alsó DIV-et, amely csak a tartalom túlcsordulás miatt kellet, ha több a tartalom mint a felső DIV nagyméretű háttere.
Szóval betettem a lábháttérnek szánt ismétlődő képet a BODY hátterének, de úgy hogy függőlegesen annyival el legyen tolva, hogy a nagyméretű háttérkép aljához passzoljon (azaz annak a folytatásának tűnjön, mivel ez a lábháttér is annak egy alsó, sematikusabb részéből lett kivágva).
Köszi mindenkinek

2010-07-31, 06:24	#1
toldigabor Új tag Csatlakozott: 2010 Jul Összes hozzászólás: 30 Kiosztott köszönetek: 13 Begyũjtött 0 köszönetet 0 hozzászólással	Alsó DIV amely mindig kitölti a fennmaradt teret 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>

2010-07-31, 08:12	#2
benedictus Bölcs Blog: Tapéta-MaxTrend lakberendezési webáruház Csatlakozott: 2010 Apr Összes hozzászólás: 634 Kiosztott köszönetek: 96 Begyũjtött 184 köszönetet 145 hozzászólással	re: Alsó DIV amely mindig kitölti a fennmaradt teret sárga: <div style="position: fixed .... de még lesz min javítanod

2010-07-31, 11:00	#3
Joe Törzsvendég Blog: Az internet definiálása az amerikai szenátusban Csatlakozott: 2008 Sep Hely: Debrecen Összes hozzászólás: 133 Kiosztott köszönetek: 126 Begyũjtött 50 köszönetet 35 hozzászólással	re: Alsó DIV amely mindig kitölti a fennmaradt teret Szia! Strukturális átalakítással oldanám meg a dolgot, divek egymásba ágyazásával és nem a pozicionálással, úgy sokkal egyszerűbb.

2010-08-01, 11:45	#6
edem MinderBinder Csatlakozott: 2009 Sep Hely: Budapest Összes hozzászólás: 824 Kiosztott köszönetek: 155 Begyũjtött 171 köszönetet 136 hozzászólással	re: Alsó DIV amely mindig kitölti a fennmaradt teret Szerintem meg töröld az egészet és írjad újra, de úgy, hogy nem inline css-t használsz, hanem külön stíluslapot. Akkor nem lesz ennyire kusza és talán rájösz a hibára is. __________________ http://www.teakert.com <-- szerecc teázni? Fáj valami? --> http://www.arthrokomplex.hu

2010-08-02, 09:05	#7
toldigabor Új tag Csatlakozott: 2010 Jul Összes hozzászólás: 30 Kiosztott köszönetek: 13 Begyũjtött 0 köszönetet 0 hozzászólással	re: Alsó DIV amely mindig kitölti a fennmaradt teret Megcsináltam úgy, hogy töröltem az alsó DIV-et, amely csak a tartalom túlcsordulás miatt kellet, ha több a tartalom mint a felső DIV nagyméretű háttere. Szóval betettem a lábháttérnek szánt ismétlődő képet a BODY hátterének, de úgy hogy függőlegesen annyival el legyen tolva, hogy a nagyméretű háttérkép aljához passzoljon (azaz annak a folytatásának tűnjön, mivel ez a lábháttér is annak egy alsó, sematikusabb részéből lett kivágva). Köszi mindenkinek

Téma eszközök
Nyomtatható verzió megjelenítése Küldje el ezt a lapot e-mailben
Megjelenítési módok
Egyenes mód Átkapcsolás hibrid módra Átkapcsolás rétegezett módra

Hasonló témák
Téma	Téma szerzője	Fórum	Válaszok	Utolsó hozzászólás
Hozzászólások megválaszolása? Mindig?	laszloberndt	Általános beszélgetés	51	2009-08-25 16:33
C# .net stb. progamozó vagyok. A kérdés mindig hogy mi is a kérdés ? hehe	zoltanka	Bemutatkozás	4	2009-08-12 22:54
Még mindig nem értem ezeket a linkeket	Ashtor	Google	14	2008-03-04 08:53
Online pénz amely müködik	dassad	Honlap kritika	19	2007-07-04 11:59