Zirzəmi dibinə basırıq. Sabit Altbilgi həmişə aşağıdadır

Hər layout dizayneri gec-tez veb-saytın altbilgisini səhifənin aşağısına basmaq ehtiyacı ilə üzləşir. İnternetdə bu problemi həll etməyin bir neçə yolu var. Özüm praktikada istifadə etdiyim bəzilərini sizə göstərəcəyəm.

Ən sadə html işarələməsi:

Metod №1

Altbilgi tamamilə yerləşdirərək və ana blokların hündürlüyünü (html , gövdə və sarğı) 100%-ə qədər uzatmaqla aşağıya itələnir. Bu halda, məzmun bloku altbilginin hündürlüyünə bərabər və ya ondan böyük olan alt kənarı göstərməlidir, əks halda sonuncu məzmunun bir hissəsini əhatə edəcəkdir.

* ( kənar: 0; doldurma: 0; ) html, gövdə ( hündürlük: 100%; ) . sarmalayıcı ( mövqe: nisbi; minimum hündürlük: 100%; ) . məzmun ( doldurma-alt: 90px; ) .footer ( mövqe : mütləq sol: 0 eni: 100%;

Metod №2

Görünən şaquli sürüşmədən xilas olmaq üçün məzmun blokunu və onun "valideynlərini" brauzer pəncərəsinin tam hündürlüyünə çəkmək və altbilgini mənfi kənardan (margin-yuxarı) yuxarı qaldırmaqla Altbilgi aşağı sıxılır. Bu halda, zirzəminin hündürlüyünü göstərmək lazımdır və bu, girinti miqdarına bərabər olmalıdır. Box-sizing: border-box xüsusiyyəti sayəsində biz məzmun sinfi olan qutunun 100% hündürlüyünü keçməsinin qarşısını alırıq. Yəni, bu halda min-hündürlük: 100% + padding-alt: 90px brauzer pəncərəsinin hündürlüyünün 100%-nə bərabərdir.

* ( kənar: 0; doldurma: 0; ) html, gövdə, .wrapper ( hündürlük: 100%; ) .məzmun ( qutu ölçüsü: sərhəd qutusu; minimum hündürlük: 100%; doldurma-alt: 90px; ) . altbilgi (hündürlük: 80px; yuxarı kənar: -80px; )

Metod №3

Bu üsul yaxşıdır, çünki digər üsullardan fərqli olaraq (5-cidən başqa) altbilginin hündürlüyü əhəmiyyət kəsb etmir. Burada qablaşdırma blokunu cədvələ, məzmun blokunu isə cədvəl cərgəsinə çevirməklə cədvəlin davranışını təqlid edirik (ekran: cədvəl və ekran: cədvəl-sətir xüsusiyyətləri müvafiq olaraq). Bunun sayəsində və məzmun blokunun və onun bütün əsas konteynerlərinin 100% hündürlüyə təyin edilməsi sayəsində məzmun avtomatik olaraq təyin olunan altbilgi hündürlüyü çıxılmaqla tam hündürlüyünə qədər uzanır - cədvəl emulyasiyası altbilginin hündürlüyündən kənara çıxmasının qarşısını alır. brauzer pəncərəsinin hündürlüyü.

*( margin: 0; padding: 0; ) html, body ( hündürlük: 100%; ) .wrapper ( display: table; hündürlük: 100%; ) .content ( display: table-row; hündürlük: 100%; )

Metod №4

Bu üsul əvvəlkilərdən heç birinə bənzəmir və onun özəlliyi yalnız müasir brauzerlər tərəfindən dəstəklənən calc() CSS funksiyasının və vh ölçü vahidinin istifadəsidir. Burada altbilginin dəqiq hündürlüyünü bilmək lazımdır. 100vh brauzer pəncərəsinin hündürlüyü, 80px isə altbilginin hündürlüyüdür. Və calc() funksiyasından istifadə edərək biz birincidən ikinci dəyəri çıxarırıq və bununla da altbilgini aşağıya sıxırıq.

* ( kənar: 0; doldurma: 0; ) .məzmun ( min hündürlük: calc(100vh - 80px); )

Metod №5

Bu, bəlkə də bütün təqdim olunanların ən yaxşı üsuludur, lakin yalnız müasir brauzerlərdə işləyir. Üçüncü üsulda olduğu kimi, altbilginin hündürlüyünün əhəmiyyəti yoxdur.

* ( kənar: 0; doldurma: 0; ) html, gövdə ( hündürlük: 100%; ) .wrapper (ekran: əyilmə; əyilmə istiqaməti: sütun; hündürlük: 100%; ) .məzmun ( flex: 1 0 avtomatik; ) .footer (çevik: 0 0 avtomatik; )

Metod №6

Müxtəlif hallar üçün bütöv bir kitabxana (Flexbox istifadə edərək)

Əsas tərtib qaydalarından biri əsas məzmunun ölçüsündən asılı olmayaraq, altbilgini html səhifəsinin aşağısına sıxmaqdır. Bunu etmək üçün bir çox yol var. Bu mövzuda altbilgini səhifənin aşağısına basmağın bir neçə məşhur yoluna baxacağıq:

Əvvəlcə HTML sənədinin strukturunu yaradaq. Bədən etiketinin bütün məzmunu ümumi div-ə bükülməlidir (bu nümunədə

Ekrandan istifadə edərək altbilgini səhifənin altına necə itələmək olar: flex xüsusiyyəti

Bu mənim ən çox istifadə etdiyim üsuldur. Bu, kifayət qədər sürətli, sadədir və altbilginin sabit bir hündürlüyə qoyulmasını tələb etmir. Bu xüsusiyyət artıq əksər brauzerlər tərəfindən dəstəklənir, ona görə də o, cross-brauzer tərtibatı üçün istifadə edilə bilər.

Html, bədən ( hündürlük: 100%; ) .konteyner ( min hündürlük: 100%; displey: əyilmə; əyilmə istiqaməti: sütun; ) .məzmun ( flex: 1; ) altbilgi ( )

Yerləşdirmədən istifadə edərək altbilgini səhifənin altına necə itələmək olar

Bu üsuldan istifadə edərək, altbilgini sabit bir hündürlük dəyərinə təyin etməli olacaqsınız, əks halda məzmunun bir hissəsini əhatə edəcək və bu, uyğunlaşma düzümü üçün əlverişsiz ola bilər.

vh vahidlərindən istifadə edərək altbilgini səhifənin aşağısına sıxmaq

1vh = pəncərə hündürlüyünün 1%-i. Pəncərənin hündürlüyü azaldıqda elementin eni, hündürlüyü və şrifti azalır. Bu bölmələr yalnız müasir brauzerlər tərəfindən dəstəklənir.

İstifadə etməzdən əvvəl xidmətdə yoxlamaq daha yaxşıdır: https://caniuse.com/#search=calc.

Məzmun ( min hündürlük: calc(100vh - 100px); /*100vh brauzer pəncərəsinin hündürlüyü, 100px altbilginin hündürlüyü*/ ) altbilgi ( hündürlük: 100px; )

Əlavə blok yaradaraq altbilgini ekranın aşağısına basaraq

Bu üsul əlavə html konstruksiyasının yaradılmasını nəzərdə tutur. Yeni konteyner div tələb olunacaq. Qeyd edək ki, sinif seçicisi olan blok məzmun mənfi təyin edin marjaəlavə blokun hündürlüyünə uyğun olaraq.

Bu vəziyyətdə CSS kodu belə görünəcək:

Html, gövdə ( hündürlük: 100%; ) .konteyner ( min-hündürlük: 100%; ) .məzmun ( margin-alt: -50px; /*əlavə blokun hündürlüyünə bərabər abzas*/ ) .delimiter ( hündürlük: 50px ) altbilgi ( )

Hörmətlə, Pavlova Natalya

Çox güman ki, məzmunun miqdarından asılı olmayaraq səhifənin altbilgisinin aşağıya sabitləndiyini bir dəfədən çox görmüsünüz. Gəlin bunu CSS istifadə edərək edək!

Veb səhifənin altına altbilgi və ya altbilgi necə əlavə etmək olar?

1. Stillərdən başlayaq - style.css faylı

HTML, bədən (
kənar: 0;
ekran: masa;
hündürlük: 100%;
eni: 100%;
font-family: Calibri, sans-serif;
}

Qapağı (
doldurma: 20px;
hündürlük: avtomatik;
}

Altbilgi (
fon: #f1f1f1;
ekran: masa-sətir;
hündürlük: 1px;
}

2. HTML kodu
Budur bütün işarələmə və lorem ipsum (şablon mətni).

3. Hər iki fayl eyni kataloqda olmalıdır.
İndi biz brauzer pəncərəsinin ölçüsünü dəyişdiririk və altbilginin aşağıya necə düzəldildiyinə baxırıq.

4. Aşağıya əlavə olunan altbilginin necə işlədiyinə dair bir nümunəyə baxaq.

Çox vaxt saytın məzmununun hündürlüyü ekranın hündürlüyündən az olsa belə, altbilgini səhifənin altına itələməyə ehtiyac var. Mövqe və alt kimi gözəl xüsusiyyətlər bu işdə bizə kömək edəcəkdir.

İlk baxışdan tapşırıq çox sadədir - səhifənin aşağı hissəsində bir div yerləşdirmək kifayətdir. Bununla belə, məzmun məzmununun bir səhifədən az ola biləcəyini nəzərə almağa dəyər.

Ən sadə şeydən başlayaq, tutaq ki, bizdə var

bir az doldurma ilə zirzəmi:

Bu altbilgi bağlama etiketindən əvvəl yerləşdirilməlidir, əlavə olaraq digər divlərin içərisinə yerləşdirmədən.

Bu altbilgi üçün CSS üslubunun həmişə səhifənin aşağısına sıxılması üçün necə görünəcəyi budur:

Altbilgi (mövqe: mütləq; /* elementi mütləq yerləşdirməyə təyin edin */ alt: 0; /* elementin alt sərhədini ekranın aşağısına sıxın */ sol: 0; /* elementin sol sərhədini basın ekranın sol kənarına */ /* sonra qalan xüsusiyyətlər gəlir */ padding: 20px 0:#993333 text-align:100%;)

Mütləq yerləşdirmə qüvvələri

digər elementləri tamamilə nəzərə almadan səhifəyə yerləşdirilir. alt və sol bu div-in ekran koordinatlarını təyin edin.

Deyəsən, hamısı budur - altbilgi səhifənin altına sıxılır, məzmunun məzmunu səhifənin hündürlüyündən az olduqda, hər şey lazım olduğu kimi görünür. Ancaq yox, görəcəksiniz ki, səhifəni ekranın hündürlüyündən daha böyük məzmunla doldursanız, məzmunun bir hissəsi altbilgi altında gizlənəcək, çünki mütləq yerləşdirmə digər elementlərə məhəl qoymamaq effektinə malikdir və bəlkə də altbilgi altında boş yeriniz olacaq.

Bu iki problemdən xilas olmaq üçün CSS üslubunu əlavə etməlisiniz etiket, bəli, bəli, dəqiq , amma yox , əks halda hər şey lazım olduğu kimi işləməyəcək, bu üslub belə görünəcək:

html ( mövqe:nisbi; /* nisbi yerləşdirmə */ min-hündürlük:100%; /* minimum hündürlük */ )

Bilməlisiniz ki, mütləq yerləşdirmə ana elementlərin yerləşdirilməsindən asılıdır. Beləliklə, əgər ana elementin yerləşdirilməsi nisbidirsə, o zaman koordinatlar bu əsas elementin kənarlarına nisbətən ölçülür. Ekranın hündürlüyündən daha az məzmun varsa, minimum hündürlük lazımdır ki, altbilgi hələ də səhifənin aşağı hissəsində olsun.

Məzmunun altbilgi ilə üst-üstə düşməsi problemi müxtəlif yollarla həll edilə bilər, amma ən yaxşısı, mənim fikrimcə, etiket əlavə etməkdir alt padding dəyəri altbilgi hündürlüyünə bərabər və ya ondan bir qədər böyükdür ki, məzmun altbilgiyə yaxından yapışmasın, bu üsluba bənzər bir şey:

gövdə (doldurma:0 10% 60px 10%;)

Budur, altbilgi həmişə aşağıda olacaq, məzmun azdırsa, sürüşdürmə çubuğunu görünməyə məcbur etməyəcək. Sadəcə olaraq, bu universal bir üsuldur. İndi mən bu metoddan istifadə ilə bağlı bir neçə misal verəcəyəm ki, özünüz onun necə işlədiyini görə biləsiniz.

Təxminən aşağıdakı html kodumuz var:

Nəzərdən keçirilməsi, hər şeydən əvvəl səhv etmək üçün hər şeydən əvvəl, açıq-aydın, açıq-aydın, hər şeydən əvvəl, hər şeydən əvvəl, hər şeydən əvvəl, hər hansı bir memarlıq icad etmək olar. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, aut fugit, Numquam eius modi tempora incidunt, ut worke and doore magnam aliquam quaerat

Müəllif hüquqları və saytla bağlı digər məlumatlar zirzəmidədir.

Və bu CSS kodudur.

Yadımdadır ki, cədvəllərdən div tərtibatına keçməyə başladığım anda qarşılaşdığım çətinliklərdən biri aşağıdakılar idi - sayt altbilgisini brauzer pəncərəsinin ən aşağısına necə itələmək olar, mətnin həcmindən asılı olmayaraq səhifə tam hündürlüyünə qədər uzanmış görünsün və səhifə hündürlüyü brauzer pəncərəsinin hündürlüyündən böyükdürsə (sürüşmə görünəndə), altbilgi öz yerində qalacaq.

Cədvəllərin köməyi ilə bu problem yalnız cədvəlin və/yaxud onun içinə yerləşdirilmiş xananın hündürlüyünü göstərməklə həll edilirsə, blok tərtibatında CSS-dən istifadə edərkən tamamilə fərqli yanaşma tətbiq olunur.

Təcrübə prosesində mən özüm üçün müəyyənləşdim CSS istifadə edərək, altbilgini brauzer pəncərəsinin altına sıxmağın 5 yolu.

Təqdim olunan bütün metodların HTML kodu aşağıdakı quruluşa malikdir (yalnız fərq CSS kodudur):

Aşağıdakı CSS koduna yalnız müvafiq metodu həyata keçirmək üçün minimal zəruri olan xassələr daxildir. Onların hər biri üçün canlı nümunə görə bilərsiniz.

Birinci yol

Altbilgi onu tamamilə yerləşdirməklə və ana blokların hündürlüyünü (html , bədən və .wrapper) 100%-ə qədər uzatmaqla aşağı sıxılır. Bu halda, məzmun bloku.content altbilginin hündürlüyünə bərabər və ya ondan böyük olan alt kənarı göstərməlidir, əks halda sonuncu məzmunun bir hissəsini əhatə edəcək.

* ( kənar: 0; doldurma: 0; ) html, gövdə ( hündürlük: 100%; ) . sarmalayıcı ( mövqe: nisbi; minimum hündürlük: 100%; ) . məzmun ( doldurma-alt: 90px; ) .footer ( mövqe : mütləq sol: 0 eni: 100%;

İkinci yol

Görünən şaquli sürüşmədən xilas olmaq üçün məzmun blokunu və onun "valideynlərini" brauzer pəncərəsinin tam hündürlüyünə çəkmək və altbilgini mənfi kənardan (margin-yuxarı) yuxarı qaldırmaqla Altbilgi aşağı sıxılır. Bu halda, zirzəminin hündürlüyünü göstərmək lazımdır və bu, girinti miqdarına bərabər olmalıdır.

* ( kənar: 0; doldurma: 0; ) html, gövdə, .wrapper ( hündürlük: 100%; ) .məzmun ( qutu ölçüsü: sərhəd qutusu; minimum hündürlük: 100%; doldurma-alt: 90px; ) . altbilgi (hündürlük: 80px; yuxarı kənar: -80px; )

Box-sizing: border-box xüsusiyyəti sayəsində biz sinif məzmunlu qutunun 100% hündürlüyünü keçməsinin qarşısını alırıq. Yəni, bu halda min-hündürlük: 100% + padding-alt: 90px brauzer pəncərəsinin hündürlüyünün 100%-nə bərabərdir.

Üçüncü yol

Yaxşıdır, çünki digər üsullardan fərqli olaraq (5-cidən başqa) altbilginin hündürlüyü əhəmiyyət kəsb etmir.

* ( kənar: 0; doldurma: 0; ) html, gövdə ( hündürlük: 100%; ) . sarmalayıcı ( ekran: cədvəl; hündürlük: 100%; ) . məzmun ( ekran: masa-sətir; hündürlük: 100%; )

Burada .wrapper blokunu cədvələ və .content blokunu cədvəl cərgəsinə çevirərək cədvəlin davranışını təqlid edirik (ekran: cədvəl və ekran: cədvəl sətirinin xüsusiyyətləri müvafiq olaraq). Bunun sayəsində və .content blokunun və onun bütün əsas konteynerlərinin 100% hündürlüyə təyin edilməsi sayəsində məzmun avtomatik olaraq təyin olunan altbilgi hündürlüyü çıxılmaqla tam hündürlüyünə qədər uzanır - cədvəl emulyasiyası altbilginin genişlənməsinin qarşısını alır. brauzer pəncərəsinin hündürlüyündən kənarda.

Nəticədə, altbilgi aşağıya sıxılır.

Dördüncü üsul

Bu üsul əvvəlkilərdən heç birinə bənzəmir və onun özəlliyi yalnız müasir brauzerlər tərəfindən dəstəklənən calc() CSS funksiyasının və vh ölçü vahidinin istifadəsidir. Burada zirzəminin dəqiq hündürlüyünü bilmək lazımdır.

* ( kənar: 0; doldurma: 0; ) .məzmun ( min hündürlük: calc(100vh - 80px); )

100vh brauzer pəncərəsinin hündürlüyü, 80px isə altbilginin hündürlüyüdür. Və calc() funksiyasından istifadə edərək biz birincidən ikinci dəyəri çıxarırıq və bununla da altbilgini aşağıya sıxırıq.

Aşağıdakı linklərdən istifadə edərək caniuse.com saytında hansı brauzerlərin calc() və vh-ni dəstəklədiyini öyrənə bilərsiniz: calc() funksiyasının dəstəyi, vh vahidinin dəstəyi.

Beşinci üsul (ən uyğun)

Bu, təqdim olunanların hamısının ən yaxşı üsuludur, lakin o, yalnız müasir brauzerlərdə işləyir. Üçüncü üsulda olduğu kimi, altbilginin hündürlüyünün əhəmiyyəti yoxdur.

* ( kənar: 0; doldurma: 0; ) html, gövdə ( hündürlük: 100%; ) . sarmalayıcı ( displey: çevik; çevik istiqamət: sütun; minimum hündürlük: 100%; ) . məzmun ( çevik: 1 0 avtomatik ; ) .footer ( flex: 0 0 auto; )

Flex mülkiyyəti üçün brauzer dəstəyi haqqında məlumat əldə edə bilərsiniz.

Oxşar materiallar

Tikinti

Turşu kələm ilə qızardılmış kartof Fırında kartofla bişmiş kələm

Tikinti

Pomidor sousunda bişmiş toyuq göbələkləri Tomat pastası ilə toyuq göbələkləri üçün resept

Tikinti

Zərif adının mənası Liana karyera, taleyi və xarakteridir