Hogyan tarthatja a láblécet oda, ahová tartozik?

Programozás

Ez a bejegyzés koreai nyelven is elérhető .

A lábléc az utolsó elem az oldalon. Legalább a nézetablak alján található, vagy alacsonyabb, ha az oldal tartalma magasabb, mint a nézetablak. Egyszerű, igaz? ?

Ha láblécet tartalmazó dinamikus tartalommal dolgozik, néha olyan probléma lép fel, amikor az oldal tartalma nem elegendő annak kitöltéséhez. A lábléc ahelyett, hogy az oldal alján maradna, ahol szeretnénk, hogy maradjon, felemelkedik, és üres helyet hagy maga alatt.

A gyors javítás érdekében a láblécet abszolút az oldal aljára helyezheti. De ennek megvan a maga hátránya. Ha a tartalom nagyobb lesz, mint a nézetablak, akkor a lábléc továbbra is „ragaszkodik” a nézetablak aljához, akár akarjuk, akár nem.

Ez azt a viselkedést mutatja, amelyet nem és nem akarunk:

Nézzünk meg egy megközelítést ennek elérésére.

A lábléc ellenőrzése

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

Szóval mit csinál ez?

  • Az page-containeroldal mindent megkerül az oldalon, és minimális magasságát a nézetablak magasságának ( vh) 100% -ára állítja . Jelenlegi helyzetében relativegyermekelemei absolutekésőbbi helyzet alapján beállíthatók .
  • Ennek content-wrapalsó alátétje van, amely a lábléc magassága, biztosítva, hogy pontosan elegendő hely maradjon a lábléc számára abban a tartályban, amelyben mindketten vannak. Itt olyan csomagolást divhasználnak, amely az összes többi oldal tartalmát tartalmazná.
  • A értékre footervan állítva absolute, ragaszkodva ahhoz bottom: 0, hogy page-containerbenne legyen. Ez fontos, mivel nem absolutea nézetablak felé vezet, hanem lefelé mozog, ha page-containera nézetablaknál magasabb. Mint említettük, az önkényesen 2.5remide beállított magasságát a content-wrapfentiekben használjuk .

És itt van. A lábléc most ott marad, ahol elvárhatja!

Utolsó simítások

Természetesen ez CSS, tehát nem lenne teljes néhány mobil-specifikus UX megfontolás és alternatív megközelítés min-height: 100%helyett 100vh. De ennek megvannak a maga hátrányai.

A Flexbox (flex-grow) vagy a Grid szintén használható, és mindkettő nagyon erős.

Hogy melyik módszert választja, az teljesen Önön és a tervezés sajátosságain múlik. Remélhetőleg a fenti példa és linkek segítenek időt spórolni a döntés meghozatalában és végrehajtásában.

Köszönöm, hogy elolvasta. Íme néhány más dolog, amit a közelmúltban írtam:

  • Kezdő útmutató az Amazon Elastic Container Service szolgáltatásához
  • React tesztelése Jest és Enzyme segítségével