Hogyan készítsünk egy láblécet

Hogyan készítsünk egy láblécet az oldal alján

Tartalom

Bevezetés

Emlékszem abban a pillanatban, amikor elkezdtem mozogni a táblákról a divami elrendezéséről, az egyik nehézség, amit tapasztaltam, a következő volt – Hogyan nyomja meg a webhely alagsorát (lábléc) a böngészőablak alján, Ugyanakkor az oldalra az egész magasságra néz, függetlenül a szöveg térfogatától és az oldal magasságától, nagyobb, mint a böngészőablak magassága (amikor megjelenik a görgetés), a lábléc továbbra is fennáll a helyét.

Ha táblázatok segítségével ezt a feladatot megoldani csak megadásával magassága a tábla és / vagy a sejt beágyazott benne, akkor, amikor a CSS blokk elrendezés, egy teljesen más megközelítést alkalmaznak.

A gyakorlat folyamatában magamra osztottam 5 Futter préselési módszerek a böngészőablak alján CSS segítségével.

Az összes bemeneti módszer HTML kódja a következő struktúrával rendelkezik (csak a CSS-kódexben):

Az alábbi CSS-kód csak olyan tulajdonságokat foglal magában, amelyek minimálisan szükségesek a megfelelő módszer végrehajtásához. Mindegyikük számára megtekintheti az életmódot.

Első módszer

A lábléc abszolút elhelyezésével és a szülőblokkok magasságával (HTML, test és .csomagolás)% -kal. A tartalomblokkgal .A tartalom meg kell adnia az alsó francia bekezdéset, amely egyenlő vagy nagyobb, mint az alagsor magassága, különben az utóbbi a tartalom részét képezi.

Második út

A lábléc leállt a tartalomblokk és a “szülők” leállítása miatt a böngészőablak teljes magasságához és a lábléc felemeléséhez egy negatív francia bekezdéssel (margó-tetején), hogy megszabaduljon a függőleges görgetésről. Ebben az esetben meg kell határozni az alagsor magasságát, és egyenlőnek kell lennie a francia nagyságrendjével.

A Box-méretezés tulajdonságának köszönhetően: Border Box, nem engedélyezzük az osztályegységet .Tartalom, hogy meghaladja a magasságot%. Azaz, ebben az esetben a min-height:% + padding-bottom: 90px megegyezik% böngésző ablak magassága.

Harmadik módon

Jó, mert más módon (kivéve az 5.), a fesztermagasság nem rendelkezik.

Itt emuláljuk az asztal viselkedését, megfordítjuk a blokkot .Csomagolás az asztalon, és blokkolja .Tartalom az asztali karakterláncban (megjelenítési tulajdonságok: táblázat és kijelző: táblázat, illetve). Ennek köszönhetően, valamint azt a tényt, hogy a blokk .A tartalom és az összes szülő konténerje %% beállítása, a tartalom a teljes magasságra nyílik, de hátrányos helyzetben.

Ennek eredményeként a lábléc az aljára nyomott.

Negyedik út

Ez a módszer nem hasonlít az előzőek bármelyikéhez, és sajátossága a Calc () CSS funkciók és a VH egység használata, amelyet a kortárs böngészők támogatnak. Itt meg kell tudnod az alagsor pontos magasságát.

VH a böngészőablak magassága, és a 80px a lábléc magassága. És a Calc () funkció használatával kivonjuk a második értéket az elsőtől, ezáltal megnyomva a láblécet.

Keresse meg, melyik böngésző által támogatott Calc () és a VH, akkor a HAB honlapján az alábbi linkeken: támogatja a funkciót CALC (), támogatja a VH mértékegységet .

Ötödik módon (a legtöbb releváns)

Ez az összes benyújtott módja, de csak a modern böngészőkben működik. Mint a harmadik módszernél, az érték fűrészmagassága nem rendelkezik.

Ismerje meg a böngészők flex tulajdonságainak támogatását itt.

Az oldal aljára néző lábszárnyas

Minden táblázatot előbb vagy később szembe kell néznie annak szükségességével, hogy az oldal aljára (lábléc) nyomja meg az oldal aljára. Számos módja van a probléma megoldására a hálózatban. Megmutatom néhányat, akik én magam használom a gyakorlatban.

A legegyszerűbb html jelölés:

1. módszer

Lábléc megnyomja az alsó annak abszolút pozicionálás, és húzza a magassága a szülő blokkok (HTML, test és Wrapper) által%. Ebben az esetben a tartalom tartalmát az alsó francia bekezdéssel kell meghatározni, amely egyenlő vagy nagyobb, mint a lábléc nagysága, különben az utóbbi a tartalomnak kell lennie.

2. módszer

A lábléc leállítja a tartalomblokkot és a “szülők” húzásával a böngészőablak teljes magasságához, és felemeli a láblécet egy negatív francia bekezdéssel (margó tetejére), hogy megszabaduljon a megjelenő függőleges görgetésről. Ebben az esetben meg kell határozni az alagsor magasságát, és egyenlőnek kell lennie a francia nagyságrendjével. Hála a Box-méretezés tulajdonság: Border-Box, nem teszi lehetővé a blokk a tartalommal osztály meghaladja a magasság%. Azaz, ebben az esetben a min-height:% + padding-bottom: 90px megegyezik% böngésző ablak magassága.

3. módszer

Ez a módszer jó, mert más módszerekkel ellentétben (kivéve az 5.), a fesztermagasság nem rendelkezik. Itt szimulálja az asztalra, fordult a wrapper blokkot az asztalra, és a tartalmi blokkot a táblázatban string (Képernyő tulajdonságai: Táblázat és Display: Asztali Row, sorrendben). Ennek következtében, valamint az a tény, hogy a tartalom tartalma és az összes szülőtartálya a magasság% -ra van beállítva, a tartalom a teljes magasságra nyílik, de a hátrányokban.

4. módszer

Ez a módszer nem hasonlít az előzőek bármelyikéhez, és sajátossága a Calc () CSS funkciók és a VH egység használata, amelyet a kortárs böngészők támogatnak. Itt meg kell tudnod a lábléc pontos magasságát. VH a böngészőablak magassága, és a 80px a lábléc magassága. És a Calc () funkció használatával kivonjuk a második értéket az elsőtől, ezáltal megnyomva a láblécet.

5. módszer

Talán ez a legjobb módja annak, hogy mind a bemutatott, de csak a modern böngészőkben dolgozik. Mint a harmadik módszernél, az érték fűrészmagassága nem rendelkezik.

6. módszer

Itt van egy egész könyvtárat a különböző esetekben (használt flexbox)

Hogyan nyomjuk meg a lebegő láblécet az oldal aljára

Ez egy rémálom! Miért pincéjében webhely újra „kiugrik”, és eltolja a tervezési? Lehetetlen a láblécet az oldal aljára nyomja meg valamivel? Legalább tartalom vagy téglák! A monitorban lévő tégla nincs prolaza?

Nyilvánvaló, majd üljön le, és ne tegyen semmit, amíg elolvasod a cikkünket.

Tegye a megfelelő láblécet a webhelyére

Sok helyszíni tulajdonos találkozik ezzel a problémával, amikor az oldal lábléc egyszerűen megjelenik az “UP”. És akkor nem egyértelmű, hogy mit kell tennie. Leggyakrabban ez a hátrány a helyszínek, az égő egy mentőadó kézzel, önállóan (“őrült fogantyúk” körön) vagy kezdő webmesterekkel.

Ugyanakkor, a helyszín életének első pórusaiban semmi szörnyű történik. És egy ilyen idill is folytatódik, amíg a tartalom az “súlyát” adja az alagsorba, nem hagyja, hogy emelkedjen fel. De szükség van, hogy tegyen egy kis anyag az oldalon, és a közelmúltban „nyugodt” lábléc azonnal felmászik, ami a teljes design a helyszín nem megfelelő.

A temetkezési sablon “hibájának” megszüntetése érdekében nem szükséges pénzt költeni a webmesteri szolgáltatásokra. Leggyakrabban a webhely követője a sajátra helyezhető. Tekintsük minden lehetséges lehetőséget az ilyen probléma kiküszöbölésére:

Első módszer

Az első módja annak, hogy “kötődjön az alagsor” alagsorának “az oldal aljára” CSS-en alapul . Kezdjük, megadjuk a példakódot, majd részletesebben fontolja meg, hogy megvalósul:

Annak érdekében, hogy ragaszkodjunk az alagsorba a címke oldal aljára, egy tartályt végeztünk (réteg wrapper). A teljes oldalt és a “test” tartalmát a képernyő határainál. Ehhez a CSS-kódban a címkék magasságát és% -ot állítottuk be:

A tartályréteg minimális magassága% -ban is telepítve van. Ha a tartalomszélesség nagyobb, mint a tartály magassága, állítsa be az automatikus értéket . Ennek köszönhetően a Wrapper automatikusan alkalmazkodik a tartalomoldal szélessége alatt:

A “Magasság:%” kód vonala régebbi, vagyis olyan verzióknak készült, amelyek nem érzékelik a min-magasság tulajdonságot .

Ahhoz, hogy az oldal helyét az oldal tervezésbe tesszük, beállítottuk a címkéket a pixelben:

Ebben a szakaszban, kaptunk egy weboldal széles teljes képernyőn, és ezen felül képpontot, amely „semlegesített” a negatív érték a lábak (margin: px) relatív helymeghatározás telepített érte (position: relative). Így a francia bekezdés negatív értéke segítségével “eltoljuk” az alagsorot a tartályterületre, amelyhez a magasság% -ban van telepítve.

Ebben a példában a jelölés a web dokumentum segítségével állíthatjuk viszonylag új HTML 5 címkéket, amelyek tévesen értelmezte az elavult változat a böngészők. Emiatt az egész oldaltervezést helytelenül jeleníthetjük meg. Ennek elkerülése érdekében új címkékre van szüksége az Arsenal 5 verziójából a hipertext nyelv helyett a szokásos

Javított opció

Az eljárás a fent tárgyalt, hogyan lehet a láblécben található az oldal alján „rendíthetetlen” nem mindenki jön. Ha a jövőben a felbukkanó ablakok segítségével módosítani és javítani fogja webhelyét, akkor jobb, ha megtagadja az előző végrehajtás használatát.

Leggyakrabban a CSS Z-Index tulajdonságot használják a felbukkanó megvalósításában . Az értékeinek felhasználásával a rétegek kivetésének sorrendje egymásra van állítva.

Minél nagyobb a Z-indexelem értéke, annál magasabb lesz a “rétegzés” teljes veremében.

De annak a ténynek köszönhető, hogy az előző példában használt negatív értéke a láb a futurt, az alsó része a pop-up ablak átfedik a felső részét a pincében. Bár a z-index nagyobb értéke lesz . Mivel a felugró ablak szülője (Wrapper) a tulajdonság értéke még mindig kevesebb.

Itt van egy tökéletesebb lehetőség:

CSS – példa kód:

Amint a kódból látható, az alagsorban a főelem összetételére helyeztük. Konténerünk relatív pozícionálással és egy fordulatosan – abszolút. Az alagsorban rögzítve alján a tartály, amelyben álláspontját a bal fenti 0.

Lehetőség a nem rögzített magasságú alagsorban

A korábbi megvalósítási módszerek biztosíthatják, hogy a lábuház mindig az oldal alján lesz. De csak akkor, ha a rögzített szélesség alagsora. És mit kell tennie, ha az általa elhelyezett tartalom számát nem lehet megjósolni?

Ez a nem rögzített pincében tökéletesebbebb lehetőséget igényel. A kijelző tulajdonságaihoz táblázathoz van állítva . Ennek köszönhetően a táblázat soraként jelenik meg:

Ez egy bekezdés a helyszín alagsorában található. A lábléc nincs rögzítve, így mérete alkalmazkodhat a tartalom méretéhez:

Futher webhely megbízhatóan megnyomva az alsó oldalra. Most biztosan nem fog felugrani, és “nem szakad meg” az erőforrás teljes tervezése. És mindenki, mert az alagsor rögzítéséhez nem használtunk téglákat, hanem a HTML és a CSS képességeit .

Források:

Hab
Hab
Hab