1. bejegyzés
Ide írjuk az első bejegyzés szövegét.
Ez a címke az előző címkékhez hasonlóan többször is használható egy oldalon. Valószínűleg már a névből kitaláltad, hogy ez az oldal lábléce. Elhelyezhet benne pultokat, szerzői jogi szöveget az oldalon, elérhetőségeket stb. Lehetőség van egy navigációs sáv () beszúrására is az oldal láblécébe. Senki sem tiltja olyan új elemek beszúrását, mint az oldal és a szakasz, de én a helyedben nem tenném.
Ide írjuk az első bejegyzés szövegét.
Ide írjuk a második bejegyzés szövegét.
Az eredmény a következő legyen:
Ebből a példából az következik, hogy minden egyes cikknek vagy bejegyzésnek lehetnek saját elemei
Nos, most megismerkedtél a HTML5 fő szerkezeti elemeivel, a következő leckékben pedig még több új elemet, különféle formákat fogunk szemügyre venni, amelyek más HTML specifikációkban nem szerepeltek!
Sziasztok, a blogoldal kedves olvasói. Folytatjuk az előző három cikkben elkezdett és folytatott blokk-elrendezés témát. Elvileg már sikerült két- és háromoszlopos oldalelrendezést is elkészítenünk, és még a gördülékeny elrendezés elkészítésének árnyalatait is sikerült figyelembe vennünk.
Ezenkívül a webhely elrendezéséről szóló első cikkekben () figyelembe vettek a webmesterség néhány alapvető fogalmát, amelyek megértése nélkül meglehetősen nehéz lenne megérteni az árnyalatokat.
Ma megpróbálunk megoldani egy apró problémát, amely a korábban elkészített elrendezéssel kapcsolatban felmerülhet. Leggyakrabban ez a helyzet akkor fordul elő, amikor nagy (nagy felbontású) monitorokon nézi, és amikor egy kis mennyiségű információt tartalmazó oldalt jelenít meg.
Ebben az esetben kiderülhet, hogy a lábléc nem a képernyő aljára nyomódik, hanem szinte a magasságának közepén helyezkedik el, ami a legtöbb esetben csúnyán és esztétikusan fog kinézni.
Ennek ellenére véleményem szerint a láblécet a webhely elrendezésének legaljára kell nyomni, és ez különösen igaz abban az esetben, ha az oldal magassága kisebb, mint a felhasználó képernyőjének magassága. Sematikusan ez a következőképpen ábrázolható:
Azok. a lábléc helyes viselkedése kis mennyiségű információ esetén az oldalon és nagy felhasználói képernyő esetén a következő lesz:
Ennek megvalósításához számos manipulációt kell végrehajtanunk az elrendezésünk kódjával. Sőt, nem csak a Style.css CSS stílusfájlon fogunk változtatni, hanem az Index.html-en is, amely HTML kódot tartalmaz és Div blokkokat képez. De először a dolgok.
Például a korábban létrehozott háromoszlopos webhelyelrendezést fogjuk használni. Ebben az esetben az Index.html így fog kinézni:
És a következő CSS-tulajdonságok kerültek a Style.css fájlba:
Törzs, html ( margó:0px; padding:0px; ) #maket (szélesség:800px; margó:0 auto; ) #fejléc(háttérszín:#C0C000; ) #left(háttérszín:#00C0C0; szélesség:200px ; lebegés:bal; ) #jobb(szélesség:200px; háttérszín:#FFFF00; float:jobb; ) #content( háttérszín:#8080FF; margó-bal:202px; margó-jobb:202px; ) #lábléc (háttérszín:#FFC0FF; tiszta:mindkettő; )
Nos, maga az elrendezés valahogy így nézett ki:
Mint látható, a lábléc nincs lenyomva, ezért nem felel meg a követelményeinknek (mindig a legalsó oszlop alatt található), ezért módosítanunk kell a kódon. Ugyanez megtehető a kétoszlopos elrendezésnél és a fluid elrendezésnél is. A módszer univerzális.
Tehát át kell helyeznünk a Div láblécet a képernyő aljára. Ehhez először be kell állítania a teljes oldal magasságát száz százalékra (az egész képernyőt el fogja foglalni). Erre azért lesz szükség, hogy a fő blokkot az elrendezéssel is 100%-ra átméretezzük.
A webhely oldalának teljes tartalma a nyitó és záró Body címkékbe kerül, ezért a Style.css Body címkéjéhez még egy CSS-tulajdonságot kell hozzáadnunk, amely 100%-ra állítja a magasságot:
Törzs, html ( margó: 0 képpont; kitöltés: 0 képpont; magasság: 100%; )
Ez semmilyen módon nem befolyásolja a megjelenést, de most már a fő blog a képernyő teljes magasságában nyújtható. Azok. egyfajta előkészítő szakasz volt.
A CSS főbb tulajdonságait, ha szeretné, megtekintheti. Most állítsuk be a teljes elrendezésünket körülvevő Div tárolót minimum 100%-os magasságra:
Azt is szeretném kiemelni (div with id="maket"). Ehhez beállítunk egy keretet a megfelelő Border () tulajdonság segítségével:
A tulajdonság szegélye: tömör, 3 képpontos fekete lehetővé teszi, hogy 3 képpont vastagságú tömör szegélyt (szilárd) állítson be ehhez a tárolóhoz. Ez lehetővé teszi, hogy jól látható legyen, hogy az elrendezésű tároló a képernyő teljes magasságában ki van feszítve, még akkor is, ha az oldalon kevés információ található:
Most ki kell venni a láblécblokkot az általános tárolóból, és alá kell helyezni, közvetlenül az általános után. Mit fog adni? És az a tény, hogy az elrendezésben a lábléc végre lefelé csúszik, és nem fog hozzábújni a leghosszabb oszlopához, mint korábban. Ebben az esetben az Index.html így fog kinézni:
Kérjük, vegye figyelembe, hogy a láblécblokk már nem egy közös tárolón (maket) belül található, ezért a szélességét már nem a Style.css fájl maket számára beállított CSS-tulajdonságai szabályozzák. A lábléc a képernyő szélességében meg lesz feszítve, de továbbra is a képernyő alján, közvetlenül a fő blokk alatt lesz:
De ismét van egy probléma, mert a lábléc megtekintéséhez most már görgetni kell a képernyőt a böngészőben (lásd a görgetősávot a fenti ábrán).
Kiderült, hogy ennek az az oka, hogy a fő tároló (maket) a teljes képernyőméretet elfoglalja magasságban (ezt a min-height: 100% tulajdonság határozza meg), és a lábléc közvetlenül mögötte található, és használnia kell görgetve megtekintheti, ami nem túl kényelmes és funkcionális.
Ezt a problémát úgy oldhatja meg, hogy negatív kitöltést ad a Div lábléctárolónak, így az a magasságával megegyező távolságra mozog felfelé. Ebben az esetben a lábléctároló átfut a fő tárolón, és belefér a böngésző képernyőjének magasságába (azaz nem kell görgetni a megtekintéséhez).
De ahhoz, hogy felülről negatív behúzást tudjon beállítani, ismernie kell ugyanezt a láblécmagasságot, de még nem tudjuk.
Ezért először a láblécet tartalmazó tároló magasságát állítjuk be a megfelelő tulajdonság beállításával a Style.css fájlban:
#footer( háttérszín:#FFC0FF; tiszta:mindkettő; magasság: 50 képpont; )
Ezután beállítunk neki egy negatív párnázást felülről a magasságával megegyező magasságba:
Ez lehetővé teszi, hogy a lábléc pontosan a saját magasságába emelkedjen, és így illeszkedjen a böngésző képernyőjébe (most eltávolíthatjuk a keretet: tömör 3px fekete CSS tulajdonság a maket szabályból, hogy a szegély vastagsága ne akadályozza a teljes elrendezésünket , a lábléccel együtt a képernyőre való beillesztéstől magasságban):
Amint láthatja, most a böngésző görgetősávja nem jelenik meg, és a teljes háromoszlopos blokkalapú webhelyelrendezésünk elfér egy képernyőn (ha kevés információ található az oldalon), és van egy lábléc is a lapon. alsó. Pontosan ezt kellett tennünk.
De van egy probléma, amely csak akkor jelenik meg, ha több információ található az elrendezési oldalon, és ez a helyzet kiderülhet:
Kiderül, hogy olyan helyzet adódhat, amikor az elrendezés egyik oszlopában lévő információ befut a láblécbe, ami nem fog jól kinézni. Ez annak köszönhető, hogy a hírhedt negatív párnázást beállítottuk, ami segített a láblécünket a fő elrendezési tárolóba emelni.
Azok. kiderül, hogy a képernyő alján két blokk fedi egymást az alagsorban.
A probléma megoldása egy új üres Div tároló hozzáadása (úgynevezett távtartók) elrendezésünk (maket) fő konténerébe, arra a helyre, ahol korábban a lábléces blokk volt.
Ha ennek az új tárolónak a magasságát a lábléc magasságára állítjuk be, elkerülhetjük, hogy a fő tárolóból származó információ ütközzen a lábléc blokkjával. Adjunk ennek a tárolónak egy azonosítót () Rasporka néven, és ennek eredményeként az Index.html háromoszlopos elrendezésünk így fog kinézni:
A Style.css-ben pedig erre írunk ( , ami ennek a távtartó konténernek a magasságát az alagsor magasságával egyenlőnek állítja be:
#rasporka ( magasság: 50px; )
Ennek eredményeként a lábléc alulról nem a fő tárolóban lévő információra (például a legmagasabb oszlopban lévő szövegre), hanem a lábléc magasságával megegyező területre lesz nyomva egy távtartó tárolóval, amely nem tartalmaznak bármilyen információt.
Így elkerüljük az ütközéseket és a torzulásokat háromoszlopos elrendezésünkben. Minden világos és szép lesz (tisztesség és nemesség):
Mint fentebb említettem, a lábléc szélességét most külön kell beállítani, mert. ez a tároló már nem része a főnek. Ehhez további tulajdonságokat kell hozzáadnia a lábléchez a CSS-fájlhoz, amely lehetővé teszi a szélességének beállítását és vízszintes igazítását a képernyő közepén.
A Width tulajdonság segítségével célszerű a szélességet a teljes elrendezés szélességével megegyezni beállítani, és a vízszintes igazítás ugyanúgy elvégezhető, mint ahogy azt a teljes elrendezésnél tettük blokk elrendezésnél.
Így további tulajdonságokat kell hozzáadnunk a láblécazonosítóhoz:
#footer( háttérszín: #FFC0FF; világos: mindkettő; magasság: 20 képpont; margó felső: -20 képpont; szélesség: 800 képpont; bal margó: automatikus; jobb margó: automatikus; )
A width:800px tulajdonság használatával a szélesség 800 pixel, a két tulajdonság margó-bal: auto és margó-jobb: auto használatával pedig a lábléc bal és jobb oldalán lévő margó-bal beállítás automatikusan beáll, mint pl. aminek eredményeként ezek a margók egyenlőek lesznek, és hősünk a középre igazodik:
Nos, úgy tűnik, nincs mit javítani, de ez volt. Mint mindig, kedvenc böngészőnk, az Internet Explorer 6 nem ért valamit az általunk használt CSS-tulajdonságokból. Ebben a böngészőben (és valószínűleg más régiekben is) minden erőfeszítésünk ellenére a lábléc nem lesz lenyomva, hanem az oldal elrendezésének legmagasabb oszlopához fog ragaszkodni.
Ez azért van így, mert ( nem érti a min-height: 100% tulajdonságot, amivel a fő doboz minimális magasságát a képernyő magasságával azonosra állítottuk.
Ezért a probléma megoldásához alkalmaznunk kell az úgynevezett hacket, amely lehetővé teszi, hogy elmagyarázzuk (ujjakon) a régi böngészőknek, hogy mit kell tenni. A maket CSS-tulajdonságainak listája előtt be kell illesztenie a következő kombinációt:
* html #make ( magasság: 100%; )
Ez a szabály csak az Internet Explorer 6 böngészőre vonatkozik, a többi nem veszi figyelembe és követi.
Tehát a Style.css végső kinézete a képernyő aljára nyomott lábléccel a következő lesz:
Törzs, html ( margó: 0 képpont; kitöltés: 0 képpont; magasság: 100%; ) * html #maket ( magasság: 100%; ) #maket ( szélesség: 800 képpont; margó: 0 automatikus; minimális magasság: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content (háttérszín:#8080FF; margó-bal:202px; margó-jobb:202px; ) #footer( háttérszín:#FFC0FF; világos:mindkettő; magasság: 50px; margó felső:-50px; szélesség:800px; margó-bal: auto; margó-jobb: auto; ) #rasporka ( magasság: 50px; )
Nos, az Index.html végleges formája egy kicsit magasabbra került. Ennyi, a 2 és 3 oszlopos fix és gumis oldalelrendezések blokk-elrendezésével foglalkozó cikksorozat befejezettnek tekinthető.
Megnézheti a „Working with Html div tag” című videót is:
Sok szerencsét! Hamarosan találkozunk a blogoldalak oldalán
Lehet, hogy érdekel
Blokk elrendezés - Kétoszlopos, háromoszlopos és folyékony elrendezéseket hozunk létre a webhely számára 
DiV elrendezés – Hozzon létre blokkokat kétoszlopos elrendezéshez HTML-ben, határozza meg a méretüket és állítsa be a pozicionálást a CSS-ben
Ha a cipő bármely ruha utolsó eleme, akkor az e-kereskedelmi webhely lábléce az értékesítési dizájn utolsó eleme. A lábléc legalsó elemére összpontosítva a modern webhelyek készen állnak arra, hogy minden tekintetben megmutassák egyéniségüket. Versenyképes e-kereskedelmi környezetben elegendő eredeti ötlet, kreativitás és tervezési irányzat. Mielőtt diverzifikálná egy e-kereskedelmi oldal láblécét, érdemes átgondolni a fontos szempontokat. Mit helyezzünk el először, és hogyan lehet a legjobban csinálni? Tekintse meg inspiráló lábléctervek áttekintését érdekes lehetőségekért.
Olvassa el még: 13 e-kereskedelmi marketingtrend 2019-ben
Érdekes statisztikák a Chartbeat cégtől. Egy 25 millió felhasználó viselkedését vizsgáló tanulmány kimutatta, milyen mélyen böngészik az oldalakat. Kiderül, hogy a felhasználó figyelmét a hajtási vonal alatti tér vonja fel. Gyakorlatilag hasznosabb információkhoz jutva a látogatók az oldal tetejétől az 1200px-es területen (a böngészőben függőlegesen átlagosan 700px-el), illetve a második képernyő mögött időznek a legtovább.
Megtekintési idő (mp) / Távolság az oldal tetejétől (pixel)
Nagy különbség az első és a második képernyő megtekintésének időtartamában. Maga a TOP 4 másodperc, az időtartam felülről 1200 pixelnél éri el a maximumot (16 másodperc), további görgetéssel pedig lassan csökken.
Látogatók aránya (%) / Távolság az oldal tetejétől (képpont)
A látogatók jelentős része (több mint 25%) meg sem várja a tartalom betöltődését és elkezdi görgetni az oldalt. Ez azt jelenti, hogy csak 75%-uk látja először a legfelsőt. Az oldal legnézettebb területe 550 képpont (közvetlenül a hajtási vonal felett).
A tanulmány eloszlatja azt a mítoszt, hogy a felhasználók nem görgetnek le az oldal aljára, és nem nézik meg az összes tartalmat. A lábléc egy modern e-kereskedelmi webhely számára is fontos, sőt, megvannak a maga előnyei is.
Ez a 10 tipp megmutatja, hogyan lehet gyönyörűen megtervezni az oldal láblécét - a webdesign kompozíciós szabályai szerint és a kiemelt feladatok megoldásával. Alkalmazza a legmegfelelőbb taktikát a használhatóság, az UX (felhasználói élmény) javítására, sőt az eladások növelésére is.
A szükséges szervezési és jogi kérdéseket hagyományosan az oldal láblécében ismertetjük. Az értesítések stílusa kevésbé látható szöveggel történik, ami felszabadítja az oldal más területeit az értelmesebb elemek számára. Itt van egy példalista, amelyet figyelembe kell venni:
Az árut értékesítő weboldalnak meg kell felelnie a jogszabályi előírásoknak, és tájékoztatást kell adnia a visszaküldés menetéről, feltételeiről. Elhelyezkedése a láblécben egyaránt kényelmes az értékesítési forrás és a látogatók számára.
Yves Rocher online áruház: teljes képernyős lábléc váltakozó rétegek szép kialakításával. Tájékoztatást nyújt a cégről, az értékesítési oldal infrastruktúrájáról - a rendeléskövetéstől a személyes adatokra vonatkozó szabályzatig. Íme tippek a termék használatához, bónuszok, promóciók
Az élelmiszer-adalékanyagokkal kereskedőket fokozott jogi felelősség terheli felelősség. Jó néhány dolgot kell/nem szabad elmondaniuk az értékesítési oldalukon. A jogi információkra mutató hivatkozások félkövérrel vannak szedve a jobb láthatóság érdekében.
A gyönyörű háttérképet tartalmazó lábléc nagyon szervesen illeszkedik a webhely általános kialakításába. Nincs egyértelmű határ, inkább maga a tartalom szolgál elválasztóként
Eladó oldal gyönyörű retro fejléc- és láblécdizájnnal. 100 év garancia az anyag- és kiviteli hibákra. A visszaküldési feltételeket érdekes történetek kísérik... nem minden olyan szomorú a szükséges e-kereskedelmi információkkal
A lábléchivatkozások számának korlátozásakor ne fukarkodjon a negatív szóközzel – ez elképesztő hatással lesz a vizuális észlelésre és javítja az olvashatóságot. Általános szabály: Vizuális hierarchia fenntartásakor a központi elemek gyorsabban észrevehetők (előnyösen használhatók!).
A minimalista stílus és a rögzített legördülő menü segítségével egy webáruház tágas láblécet engedhet meg magának.
RÓL RŐL nagy számban a mikronegatív tér (kis elemek között) így mondható el: amíg minden szükséges információ megvan, olvasható és gyorsan észlelhető - minden rendben
A kávézóhely tágas lábléce nagyszerűen kiegészíti a letisztult dizájnkompozíciót, amely sok makronegatív teret tartalmaz („levegő” a részek/szakaszok között)
Olvassa el még: 30+ példa és tervezési ötlet célzott műveleti gombokhoz
A lábléc stílusos kialakítása ékesszólóan beszél magáról az erőforrásról. Fontos megjegyezni, hogy a vevő kicsit tovább marad itt, mint az oldal többi részén. Jó lehetőség egy újabb utolsó cselekvésre. Gyakran ez egy előfizetés / levelezőlista, de társíthat egy CTA-hívást a fiók regisztrációjához.
A Greetabl szerényen megtervezett oldala van, benne feliratkozási felhívással. Minimális elemekkel a hívás észrevehetővé válik, és a türkiz háttérrel összhangban helyszíni dekorációvá válik
Szép dizájn cselekvésre ösztönzőkkel az oldalak alján. Az értékesítési webhely-készítő szerkezete univerzális. 35 nyelvre fordították le millió vásárlója számára.
A bevásárlókosárhoz való hozzáférés az oldal aljáról nagyszerű módja annak, hogy javítsa az oldal használhatóságát és értékesítési minőségét.
A vendéglátó cég árusító honlapja kellemes megjelenésű és kényelmes a vásárló számára
Az oldal alja ideális a ritkán megtekintett információkhoz: a cégről, a szolgáltatás feltételeiről és az adatvédelmi szabályzatról. Ebben az esetben a lábléc funkciója az, hogy mindenkit megmentsen. Ha valaki elveszettnek érzi magát az e-kereskedelmi környezetben, érdeklődni kezd az e-kereskedelmi infrastruktúra iránt, ösztönösen görgetve…
A negatív szóköz szükséges a tartalom olvashatóságához. Általában a "lábléc" nem navigációs célokat szolgál, ellentétben a menüvel vagy az oldaltérképpel. Az e-kereskedelmi webhelyek csak ritka esetekben helyeznek el bizonyos termékkategóriákat a láblécben (
Ez valami rémálom! Miért jelenik meg újra webhelye lábléce, és miért változtatja meg a megjelenést? Tényleg lehetetlen valamivel rendesen az oldal aljára nyomni a láblécet? Tartalom vagy tégla legalább! Tégla a monitorban nem mászik?
Értem, akkor ülj le és ne csinálj semmit, amíg el nem olvasod cikkünket a végéig.
Sok webhelytulajdonos találkozik ezzel a problémával, amikor az oldal lábléce egyszerűen felugrik. És akkor nem világos, hogy mit kell tenni. Leggyakrabban a sebtében, önállóan készült weboldaltervek ( kör "őrült kezek") vagy kezdő webmesterek.
Ugyanakkor az oldal élettartamának kezdetén semmi ijesztő nem történik. És ez az idill addig tart, amíg a tartalom „saját súlyával” nyomja a pincét, megakadályozva, hogy felemelkedjen. De érdemes kevesebb anyagot elhelyezni az oldalra, és a mostanában „nyugodt” lábléc azonnal felemelkedik, és az oldal teljes dizájnját nem megfelelő megjelenésbe hozza.
Az elkészített sablon ezen "hibájának" kiküszöbölése érdekében nem szükséges pénzt költeni a webmester szolgáltatásaira. Leggyakrabban a webhely láblécét saját maga is beállíthatja. Mindent fontolj meg lehetséges opciók hasonló probléma hibaelhárítása:
Az első módja annak, hogy a láblécet az oldal aljára „horgonyozzuk”, a CSS-en alapul. Kezdjük a példakóddal, majd nézzük meg közelebbről a megvalósítását:
html ( magasság: 100%; ) fejléc, navigáció, szakasz, cikk, félre, lábléc (megjelenítés: blokk; ) törzs ( magasság: 100%; ) #wrapper (szélesség: 1000px; margó: 0 automatikus; min-magasság: 100 %; magasság: automatikus !fontos; magasság: 100%; ) #fejléc (magasság: 150px; háttérszín: rgb(0,255,255); ) #tartalom (padding: 100px; magasság: 400px; háttérszín: rgb(51,255,102) ; ) #lábléc (szélesség: 1000px; margó: -100px auto 0; magasság: 100px; pozíció: relatív; háttérszín: rgb(51,51,204); )
Lábléc ragasztása az oldalcímke aljára
html ( magasság: 100%; ) törzs ( magasság: 100%; )
Állítsa be a tárolóréteg minimális magasságát 100%-ra. Abban az esetben, ha a tartalom szélessége nagyobb, mint a tároló magassága, állítsa a tulajdonságot auto értékre. Ennek köszönhetően a burkoló automatikusan az oldalon elhelyezett tartalom szélességéhez igazodik:
#wrapper ( min-magasság: 100%; magasság: automatikus !fontos; magasság: 100%; )
A "height: 100%" kódsor az IE régebbi verzióira vonatkozik, amelyek nem fogadják el a min-height tulajdonságot.
Annak érdekében, hogy az oldaltervben elkülönüljön a lábléc helye, beállítjuk a címke behúzását
#content ( kitöltés: 100 képpont; )
Ezen a ponton van egy teljes képernyős weboldalunk, plusz további 100 pixel, amelyeket a lábléc negatív kitöltési értéke (margó: -100 képpont ) „semlegesít”, ha hozzá viszonyítva helyezzük el (pozíció: relatív ). Tehát negatív padding értékkel a láblécet a 100%-os magasságú konténer területére "toljuk".
BAN BEN ezt a példát a webdokumentum jelölése viszonylag új használatával van megadva HTML címkék 5, ami félreértelmezhető elavult verziók böngészők. Emiatt előfordulhat, hogy az oldal teljes megjelenése nem jelenik meg megfelelően. Ennek elkerülése érdekében le kell cserélnie a hipertext nyelv 5-ös verziójának arzenáljából származó új címkéket hagyományosra.
A fentebb tárgyalt módszer az oldal alján lévő lábléc „megingathatatlanná” tételére nem mindenki számára megfelelő. Ha a jövőben előugró ablakok segítségével módosítani és javítani kívánja webhelye kialakítását, akkor jobb, ha elhagyja a korábbi megvalósítást.
Leggyakrabban a pop-up ablakokat használják css tulajdonság z-index. Értékei határozzák meg, hogy a rétegek milyen sorrendben rakódnak egymásra.
Minél magasabb egy elem z-index értéke, annál magasabb lesz a teljes „rétegezési” veremben.
De mivel az előző példában negatív lábléc-kitöltést használtunk, az előugró ablak alja átfedi a felső lábléc területet. Annak ellenére, hogy magasabb lesz a z-index értéke. Mivel az előugró ablak szülője (wrapper ) ennek a tulajdonságnak még mindig kisebb értéke.
Itt egy jobb verzió:
CSS - példa kód:
html, törzs (magasság: 100%; ) .header (magasság:120px; háttérszín: rgb(0,255,102); ) .main (min-height:100%; pozíció: relatív; háttérszín: rgb(100,255,255); ) .footer ( magasság: 150 képpont; pozíció: abszolút; bal: 0; alsó: 0; szélesség: 100%; háttérszín: rgb(0,0,153); )
Amint a kódból látható, a láblécet a fő elem részeként helyeztük el. Megadtuk a tárolónak egy relatív pozíciót, és a lábléc abszolút pozícióját. A láblécet a tároló alján rögzítettük úgy, hogy a bal és felső pozícióját 0-ra állítottuk.
A korábbi megvalósítások biztosíthatják, hogy a lábléc mindig az oldal alján legyen. De csak akkor, ha a lábléc fix szélességű. De mi van akkor, ha a benne elhelyezett tartalom mennyiségét nem lehet megjósolni?
Ehhez fejlettebb opcióra lesz szükség a rögzítetlen pincében. A láblécet táblázat-sorra állítja a megjelenítési tulajdonsághoz. Ezzel táblázatsorként jelenik meg.
Emlékszem, hogy abban a pillanatban, amikor elkezdtem váltani a táblákról a div-alapú elrendezésre, az egyik nehézség, amellyel találkoztam, a következő volt: hogyan lehet a webhely láblécét (láblécet) a böngészőablak legaljára tolniígy az oldal a szöveg mennyiségétől függetlenül teljes magasságában kifeszítettnek tűnik, és ha az oldal magassága nagyobb, mint a böngészőablak magassága (amikor egy görgetés jelenik meg), akkor a lábléc a megfelelő helyén marad.
Míg a táblák ezt a problémát csak a táblázat és/vagy a benne beágyazott cella magasságának megadásával oldják meg, addig a blokk elrendezésben a CSS használatakor teljesen más megközelítést alkalmaznak.
A gyakorlás során azonosítottam magam 5 módja annak, hogy a láblécet a böngészőablak aljára tolja CSS segítségével.
Az összes bemutatott metódus HTML kódja a következő szerkezettel rendelkezik (az egyetlen különbség a CSS kódban van):
Az alábbi CSS-kód csak azokat a tulajdonságokat tartalmazza, amelyek minimálisan szükségesek a megfelelő metódus megvalósításához. Mindegyikre láthat egy élő példát.
A lábléc abszolút pozicionálásával és a szülőblokkok (html , body és .wrapper) magasságának 100%-kal történő meghúzásával tolható le. Ebben az esetben a tartalomblokk.contentben meg kell adni egy alsó behúzást, amely egyenlő vagy nagyobb, mint a lábléc magassága, ellenkező esetben az utóbbi bezárja a tartalom egy részét.
* ( margó: 0; padding: 0; ) html, body ( magasság: 100%; ) .wrapper ( pozíció: relatív; min-magasság: 100%; ) .content ( padding-bottom: 90px; ) .footer ( pozíció : abszolút; bal: 0; alsó: 0; szélesség: 100%; magasság: 80 képpont; )
A lábléc lenyomására a tartalomblokkot és a „szülőit” a böngészőablak teljes magasságába húzzuk, és a láblécet a negatív margón (margin-top) keresztül felfelé emeljük, hogy megszabaduljunk a megjelenő függőleges görgetéstől. BAN BEN ez az eset meg kell adnia a lábléc magasságát, és meg kell egyeznie a behúzás mértékével.
* ( margó: 0; padding: 0; ) html, body, .wrapper (magasság: 100%; ) .content ( doboz-méret: keret-doboz; min-magasság: 100%; padding-bottom: 90px; ) . lábléc ( magasság: 80 képpont; margó teteje: -80 képpont; )
A box-sizing: border-box tulajdonságnak köszönhetően nem engedjük, hogy a .content box magassága meghaladja a 100%-ot. Tehát ebben az esetben a min-magasság: 100% + padding-bottom: 90px a böngészőablak magasságának 100%-a.
Ez azért jó, mert a többi módszertől eltérően (kivéve az 5.) a lábléc magassága nem számít.
* ( margó: 0; kitöltés: 0; ) html, törzs (magasság: 100%; ) .wrapper ( kijelző: táblázat; magasság: 100%; ) .tartalom (megjelenítés: táblázatsor; magasság: 100%; )
Itt egy tábla viselkedését emuláljuk úgy, hogy a .wrapper blokkot táblává, a .content blokkot pedig táblázatsorrá alakítjuk (megjelenítés: tábla és megjelenítés: táblázatsor tulajdonságai). Ebből kifolyólag, valamint abból, hogy a .content blokk és minden szülőtárolója 100%-os magasságra van beállítva, a tartalom teljes magasságban meg van húzva, de mínusz a lábléc magassága, ami automatikusan meghatározásra kerül - A tábla emuláció nem engedi, hogy a lábléc a böngészőablak magasságán túl másszon.
Ennek eredményeként a lábléc az aljára nyomódik.
Ez a módszer nem hasonlít az előzőekhez, sajátossága pedig a CSS- calc függvények() és vh egységeket, amelyeket csak a modern böngészők támogatnak. Itt tudnia kell az alagsor pontos magasságát.
* ( margó: 0; kitöltés: 0; ) .content ( min-magasság: calc(100vh - 80px); )
100vh a böngészőablak magassága, 80px pedig a lábléc magassága. A calc() függvény segítségével pedig kivonjuk az elsőből a második értéket, ezzel lenyomva a láblécet.
A caniuse.com webhelyen megtudhatja, hogy mely böngészők támogatják a calc()-t és a vh-t a következő hivatkozások segítségével: calc() függvény támogatás, vh egység támogatás.
Ez A legjobb mód az összes bemutatott közül azonban csak benn működik modern böngészők. A harmadik módszerhez hasonlóan a lábléc magassága nem számít.
* ( margó: 0; kitöltés: 0; ) html, törzs ( magasság: 100%; ) .wrapper ( kijelző: flex; hajlítási irány: oszlop; min-magasság: 100%; ) .content ( flex: 1 0 auto ; ) .footer ( flex: 0 0 auto; )
Megtudhatja a flex tulajdonság böngészőjének támogatását.
