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

Hello, kedves barátaim!

Ma beszélek arról, hogy megoldja az egyik probléma sok webfejlesztő problémát, nevezetesen egy láblécet az oldal aljára.

Ha az oldalt a karcolásból vagy kész sablonból készíti el, akkor a legtöbb esetben, ha kevés tartalom van az oldalon, akkor látja az ilyen képet:

Nem tudom, miért, de még a legtöbb prémium témákban és sablonokban is van egy adott probléma, és el kell dönteni, mivel az oldal közepén lévő lábak nem nyomják, és egy csomó üres helyet úgy néz ki, mintha nem túl jó.

Annak érdekében, hogy nyomja meg a webhely futball alján az oldal többféle módon van.

1. módszer. A CSS tulajdonságok használata Min-Magasság

Ez a módszer nem túl szép az íráskód tekintetében, de nagyon egyszerű, gyors és meglehetősen hatékony.

Azt, hogy ki kell számolnunk az osztály vagy az azonosító a blokk tartalmát, majd meg érte a minimális magasság egységekben VH

Amellett, hogy a pixelek EM és százalék, mi is használni VH – ezek feltételes egységek az eszköz magassága az eszköz (Mi hasonlít százalék, de könnyebb használat)

Ez így fog kinézni:

.Tartalom { Min-Heightvh; }

Ahelyett .Tartalom lesz az osztály vagy az azonosító neve,

Ahelyett 75VH Meg kell adnia az értékét, amely a legjobban megfelel az oldalának.

A teljes képernyő magassága VH.

Ha nem tudja kiszámítani az osztályt vagy az ideophicotor elemeket, akkor ez a cikk segíti Önt egy videofelszereléssel

Valószínűleg azt gondolta: “Miért ne használjon magassági feladatot a szokásos százalékokban?”

Ez is így lehet, de az adott blokkhoz való százalékos magasság csak akkor működik, ha a magasságot a készülék minden szülőelemének százalékos aránya, beleértve a testet és a html-t is

Ez jelentősen növeli a kód kódjának és az eltöltött időt.

2. módszer. Abszolút elhelyezés

Ez egy klasszikus módja annak, hogy megnyomja a webhely futballját az oldal aljára. Azt, hogy be kell állítania egy minimális magasság% irányuló blokk tartalma és a szülő blokkokat, majd a helynek, hogy hozzanak egy negatív francia felülről, ami egyenlő a lábát. Kiderült, hogy ez lesz, mintha szóló tetején a blokk tartalmát.

Ugyanakkor, a szöveg a blokk tartalmát zárva lesz egy lábléc, így szükség lesz beállítani az alsó belső francia

Ha van egy összecsapást a következő szerkezetű:

Div id = “MAIN” Div class = “header” Oldal fejléc / Div Div class = “content” Blokk tartalommal / Div DIV Class = “Lábléc” Sitet webhelyről / Div / Div

Ez CSS tulajdonságok szükségesek az alábbiak szerint:

1 2 3 4 5 6 7 nyolc kilenc tíz tizenegy 12 13 tizennégy 15 16 17

HTML, body { Magasság%; } #Main { Position: relative; min-magasság%; Padding-BottompX; / * alacsonyabb belső francia, egyenlő a magasság a lábléc * / } .Lábléc { szélesség%; Pozíció: abszolút; heightpx; / * A magasság a lábléc * / alsó: 0; nbsp; }

Ez a módszer jó, ha az oldalt a semmiből és az alagsorban egy vagy 2 sorban alkotja. Ha a készenléti sablont a már meglévő elrendezésével és a webhely pincéjével szabályozza. A webhely több oszlopból áll, és a webhely adaptív, akkor ez a módszer megnyomásával a futret nem lesz nagyon kényelmes, mert nehéz lesz Találd ki az alagsor magassága, hogy jól néz ki a különböző képernyőkön.

Egy normális kijelző ilyen változata a lábát a lábát, hogy az az oldal alján akkor kell használni a médiát nyilvántartások vagy szkriptet, hogy különböző magasságú béklyója, és egy másik alsó menedéket különböző képernyőkön.

3. módszer. Egyszerűsített

Ennek a módszernek a jelentése megegyezik az előzőben, de a futur abszolút pozicionálásra vonatkozó feladatok nem vonatkoznak a szülőblokkhoz képest, hanem az oldal teljes testéhez képest.

Ahhoz, hogy nyomja meg a lábunkat az alsó oldalra, írjuk a következő CSS tulajdonságokat

Test, html { Pozíció: relatív; Magasság%; } .Lábléc { szélesség%; Pozíció: abszolút; Alsó: 0; }

Továbbá, ha a tartalom lezárul a lábléc alatt, akkor be kell állítania az alsó párnázatot, például az alábbiak szerint:

.Tartalom { Padding-Bottompx; / * LowervNunignotent, amelyet az olvasó * / }

4. módszer. Táblázatos

A korábban ellentétben nyomja meg a webhely lábát az oldal alján, sokkal könnyebb és hatékonyabb, különösen az adaptív elrendezéssel, mivel a Futner magassága nem érinti semmit.
A blokkokhoz való végrehajtásához adja hozzá a következő CSS tulajdonságokat

Html, test { Magasság%; } #Main { Magasság%; Szélesség%; / * Nem kell mindig, adj hozzá szükség esetén * / Kijelző: táblázat; } .Tartalom { Magasság%; Kijelző: táblázat; }

A módszer jelentése az, hogy a fő egység #Fő, A CSS tulajdonságainak fogadása után Kijelző: táblázat; úgy kezdődik, mint egy asztal, és blokkolja  .Tartalom Miután megkapta az ingatlant Kijelző: táblázat; úgy viselkedik, mint egy táblázat sora, és jobban beállítja a képernyő magasságát.

Ennek a módszernek a fő előnye, hogy megnyomta a Futur, hogy a fesztermagasság nem befolyásolja az oldalkijelzést, ezért ez a módszer biztonságosan használható az adaptív oldalak létrehozásakor és finomításakor.

Ez az, amit az egyes módon végzett kísérletek eredményeként kaptam:

Ez talán minden fő módja annak, hogy nyomja meg a lábát az oldal aljára. Vannak mások is, de ezek hatástalanok, és nem támogatják az összes böngésző, vagy a fentiekben alapulnak kisebb módosításokkal.

Ha a láblécet az aljára nyomja meg, akkor győződjön meg róla, hogy megosztja őket a megjegyzésekben.

Ossza meg ezt a cikket a szociális hálózatok, jelentkezzen a blog frissítés, és a YouTube-csatorna, amelyen megtalálja video utasításokat megoldására különböző feladatok terén a webfejlesztés.

Sikert kívánok a probléma megoldásában, és láthatlak a következő cikkekben!

Őszintén, Julia Hussar