Minden elrendezéstervező előbb-utóbb szembesül azzal, hogy a webhely láblécét (láblécét) az oldal aljára kell nyomni. A weben többféle megoldás létezik ez a probléma. Megmutatok néhányat, amit a gyakorlatban is használok.

A legegyszerűbb html jelölés:

1. módszer

A lábléc az abszolút pozicionálással és a szülőblokkok (html , törzs és burkoló) magasságának 100%-kal történő meghúzásával kerül lefelé. Ebben az esetben a tartalomblokknak meg kell adnia 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; )

2. módszer

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. Ebben az esetben meg kell adni a pince magasságát, és meg kell egyeznie a behúzás értékével. A box-sizing: border-box tulajdonságnak köszönhetően nem engedjük meg a tartalomdoboz 100%-os magasságát. Tehát ebben az esetben a min-magasság: 100% + padding-bottom: 90px a böngészőablak magasságának 100%-a.

* ( 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; )

3. módszer

Ez a módszer 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. Itt egy tábla viselkedését emuláljuk úgy, hogy a burkolóblokkot táblává, a tartalomblokkot pedig táblázatsorrá alakítjuk (megjelenítés: tábla és megjelenítés: táblázat-sor tulajdonságai). Emiatt, valamint az, hogy a tartalomblokk és annak összes szülőtárolója 100%-os magasságra van beállítva, a tartalom teljes magasságba nyúlik, de mínusz a lábléc magassága, amely automatikusan meghatározásra kerül - táblázat az emuláció megakadályozza, hogy a lábléc a böngészőablak magasságán túlra másszon.

*( 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%; )

4. módszer

Ez a metódus eltér a korábbiaktól, sajátossága a CSS calc() függvény és a vh egység használata, amelyeket csak a modern böngészők támogatnak. Itt tudnia kell a lábléc pontos magasságát. 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.

* ( margó: 0; kitöltés: 0; ) .content ( min-magasság: calc(100vh - 80px); )

5. módszer

Talán ezt A legjobb mód az összes bemutatott közül azonban csak a modern böngészőkben működik. A harmadik módszerhez hasonlóan a lábléc magassága nem számít.

* ( margó: 0; padding: 0; ) html, body ( magasság: 100%; ) .wrapper ( kijelző: flex; hajlítási irány: oszlop; magasság: 100%; ) .content ( flex: 1 0 auto; ) .footer ( flex: 0 0 auto; )

6. módszer

Egy egész könyvtár különböző alkalmakra (Flexbox használatával)

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.

Milyen problémái voltak weboldalunk elrendezésével?

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 nagyképernyő felhasználó 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.

Hogyan lehet a láblécet a webhely elrendezésének aljára tolni

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%; )

A megjelenés ez még semmiképpen nem fog tükröződni, de most már a főblog a képernyő teljes magasságába 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.

Behelyezzük a távtartót, és harcolunk az Internet Explorerrel

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, elkerülhetjük, hogy a fő tárolóból származó információ ütközjön 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 adja hozzá a CSS-fájlhoz további tulajdonságok lábléchez, 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 a kedvenc böngészőnk internet böngésző 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 azokra vonatkozik internet böngésző Explorer 6, a többi nem veszi figyelembe és végrehajtja.

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 címke div":

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

Ma megtaláljuk a végső megbízható megoldást arra a kérdésre, hogy hogyan lehet a láblécet az oldal aljára nyomni css-sel és html-t css használatával. Húzza a láblécet az oldal aljára. Ezen a módon is középre helyezheti a tartalomtartalmat az oldal közepére.

Ahhoz, hogy a láblécet az oldal aljára nyomhassa, létre kell hoznia egy adott html szerkezet:

Miután elkészült az oldalszerkezet, elkezdjük a css beállítását.

Meg kell győződnünk arról, hogy a html és a törzs elfoglalja az oldal teljes magasságát (teljes képernyő magasságát). A burkolótömbnek pedig minimális képernyőmagassága volt, és a tartalma szükség szerint nyúlt. Ezután a láblécet az oldal aljára vagy a képernyő aljára kell tolnunk, hogy mindig a tartalom alatt maradjon, és ha kevés a tartalom, akkor a láblécet a képernyő aljára kell nyomni. Ezenkívül a tartalmat a lábléc alján be kell húzni.

Nyomja meg a láblécet a képernyő alján lévő css-kódhoz:

Ez a módszer csak rögzített lábléc esetén működik. Ez azt jelenti, hogy nehezebb lesz a láblécet az oldal aljára tolni, ha annak magassága dinamikus, mivel a div-hez megfelelő alsó párnázást kell biztosítani a fő osztállyal. Itt már javascriptre lesz szükség és információra is szükség lesz.

A legtöbb esetben az oldal alján található lábléc fix magasságú, így ez a módszer problémamentesen működik.

Ha ismer egy egyszerűbb módszert, vagy hibát talál ebben a módszerben, regisztráljon és írjon megjegyzéseket. Együtt meg fogjuk keresni a tökéletes működési módot, hogy a láblécet az oldal aljához kapcsoljuk.

Nem is olyan régen felkértek, hogy mutassam meg hogyan kell lenyomni a láblécet az aljára. Ez a probléma csak akkor jelentkezik blokk elrendezés. És sajnos a legjobb lehetőség nem, de ebben a cikkben megmutatom hogyan nyomjam le a láblécet az aljára Az oldalak elrendezésénél vagyok.

Mondjuk van HTML kód:

Nak nek nyomja le a láblécet, az adottra kell alkalmazni HTML kód következő CSS kód:

html(
magasság: 100%;
}
test (
magasság: auto !fontos; // Kötelező, ha sok tartalom van a mainben
magasság: 100%;
min magasság: 100%
}
#fő(
párnázás-alsó: 50px
}
#footer (
alsó: 0;
magasság: 50 képpont;
pozíció: abszolút;
}

Itt minden átlátszó, de csak azt mondom, hogy a vonal " magasság: auto !fontos;" lehetővé teszi annak figyelembevételét, hogy ha a tartalom be fő- nagyobb lesz, mint az oldal magassága, akkor a magasság nagyobb lesz, mint 100% . Enélkül a lábléc egyszerűen elfér a tartalom felett, és mindig ugyanazon a helyen lesz.

Sajnos a megoldás nem ragyog a szépségtől, de mások véleményem szerint még rosszabbak. Általában, ha nincs elég tartalom, akkor alul hagyom az oldal háttérszínét. De az ügyfél néha ugyanazt kérdezi tolja le a pincét, majd a cikkben leírt módszert használom.

Gyakran előfordul, hogy a láblécet az oldal aljára kell tolni, még akkor is, ha a webhely tartalmának magassága kisebb, mint a képernyő magassága. Az olyan szép tulajdonságok, mint a pozíció és az alsó, segítenek nekünk ebben.

Első pillantásra a feladat nagyon egyszerű – csak tegyen egy divet az oldal aljára. Érdemes azonban megfontolni, hogy a tartalom kitöltése kevesebb is lehet, mint egy oldal.

Kezdjük a legegyszerűbbel, mondjuk van