Ebben az esetben a <center>-nek miért nem tudok margin-bottom értéket adni?
Adott a következő felosztás: van egy <center> elem majd alatta a <footer>. Mindegyik szélessége 100% és egymás felett-alatt helyezkednek el. A <footer> position:fixed;bottom:0 értékkel a lap legaljára van fixálva. Mind a kettő közvetlen a <body> tagben van elhelyezve.
A <center> a következő tulajdonságokkal rendelkezik:
-width:00%;
-height:auto;
-box-sizing:border-box;
-z-index:0;
A <footer> pedig:
width:100%;
-height:auto;
-position:fixed;
-bottom:0;
-z-index:-1;
A <html> illetbe <body>:
width:100%;
-height:100%;
-border:none;
-margin:0px;
padding:0px;
Szóval, a dolog mindaddig működik amíg a <center> nincs akkora mint a teljes képernyő, ha viszont annál nagyobb (ergo görgetni kell) akkor alatta a <footer> egyszerűen eltűnik. A <center> nagyon ragaszkodik ahhoz hogy a képernyő legaljáig érjen akkor ha a tartalma azt kívánja hogy nagyobb legyen mint a képernyő magassága. A margin-bottom-ra egyszerűen nem reagál, akkor is a képernyő legaljáig akar érni. Próbáltam neki különböző display értékeket adni az sem változtatott. Tudom hogy a z-index kicsit belerondít a képbe de máshogyan a <footer> fixen a képernyő alján van akkor is ha görgethető az oldal.
Valakinek esetleg ötlete?
válasza: válasza:Egyrészt, ne kisregényt írj, hanem csatolj kódot, abbol látszik is, hogy mi a probléma.
Másrészt a <center> tag elavult, ne használd.
Harmadrészt, ismerkedj meg a flexbox-szal és a griddel, illetve az olyan mértékegységekkel, mint a vh, mert szerintem te valami ilyesmit szeretnél csinálni, csak nem tudod, hogyan kell.
válasza:Nem úgy értem.
Azzal, hogy a footer-nek position: fixed-et adtál, kiemelted a document flow-ból, innentől fogva a centernek és a footernek semmi közük egymáshoz, nincsenek layoutbeli kapcsolatban egymással. Gyakorlatilag tök függetlenek egymástól.
Több jó megoldás is van, de az sehogy se lesz jó, ha valamelyiket kiemeled a document flow-ból.
Adj a body-nak 100vh-t, így akkora lesz, mint a megjelenítő mérete. Ugyanakkor legyen flex, és flex-column, hogy a layout függőlegesen (oszlopszerűen) legyen. Már ennyi elég ahhoz, hogy a main és a footer egymás alatt legyenek.
Aztán adj egy flex-grow: 1-et a main-nek, hogy felhasználja a rendelkezésre álló területet.
Itt egy példa: [link]
Ez akkor is jól működik, ha a main-ben nincs semmi, mert a flexbox akkor is "lenyúlik" az oldal aljáig,
válasza:Itt egy grides megoldás, ez talán még egyszerűbb is: [link]
A body magassága 100vh, egyben grid is, a grid-template-rows pedig "1fr auto;", ami azt jelenti, hogy az első sor kitölti a rendelkezésre álló helyet (egy frakció), a második sor magassága pedig automatikus.
Egyszerű, mint az egyszer egy.
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!