tagiga pastki so`zni joylashtiring (asosiy HTML va CSS)

Footerni pastki qismga yopishtirish uchun bir-biridan farq qiladigan echimlarni ko'rdim, ammo mening yondashuvim noto'g'ri ketayotganini aniqlay olmayapman. Menga footer uslubi quyidagicha:

footer { 
left: 0; bottom: 0; position : absolute; width: 100%; height : 40px}

Dastlab, sahifaning pastki qismida yaxshi bo'ladi. Men brauzerni minimal darajaga tushirganimdan so'ng, sahifaning o'rtasida biron bir joyga yopishib olasiz va hatto oynani maksimal darajada ko'targaningizdan keyin ham u erda qoladi. Har qanday yordamni qadrlaymiz.

1
Xulq-kod position: absolute tufayli yuzaga keladi
qo'shib qo'ydi muallif Smit, manba
Kontent sahifa mos bo'lmasa, sahifaning pastki qismida olmashingiz kerak deb o'ylayman. Aks holda, aylantirish kerakmi?
qo'shib qo'ydi muallif Armin, manba
Kontent sahifa mos bo'lmasa, sahifaning pastki qismida olmashingiz kerak deb o'ylayman. Aks holda, aylantirish kerakmi?
qo'shib qo'ydi muallif Armin, manba
atributi sahifaning pastki qismida bo'lishi kerak, hatto kontent sahifa qancha bo'lsa ham. Agar kontent sahifadan tashqarida bo'lsa, altbilgi kontentning pastki qismida yotadi
qo'shib qo'ydi muallif rav, manba
atributi sahifaning pastki qismida bo'lishi kerak, hatto kontent sahifa qancha bo'lsa ham. Agar kontent sahifadan tashqarida bo'lsa, altbilgi kontentning pastki qismida yotadi
qo'shib qo'ydi muallif rav, manba
atributi sahifaning pastki qismida bo'lishi kerak, hatto kontent sahifa qancha bo'lsa ham. Agar kontent sahifadan tashqarida bo'lsa, altbilgi kontentning pastki qismida yotadi
qo'shib qo'ydi muallif rav, manba
Javob uchun rahmat: @Smit! Shunday qilib, pastki qismni mutlaq ravishda pozitsiyamiz bilan ushlab turishimiz mumkin emasmi? Agar pozitsiyani aniq belgilab qo'ysam, taglik 1 sahifadan ortiq bo'lsa ham, u yerda qoladi!
qo'shib qo'ydi muallif rav, manba
Javob uchun rahmat: @Smit! Shunday qilib, pastki qismni mutlaq ravishda pozitsiyamiz bilan ushlab turishimiz mumkin emasmi? Agar pozitsiyani aniq belgilab qo'ysam, taglik 1 sahifadan ortiq bo'lsa ham, u yerda qoladi!
qo'shib qo'ydi muallif rav, manba

8 javoblar

Use position: fixed; instead of position: absolute;. you will also need to add some bottom padding to your <body> in order to see full content, the value of this padding should be equal to your

's height.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body {
  height: 200vh;
  padding-bottom: 40px;
}

footer {
  left: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 40px;
  background: tomato;
}

this is the footer
</div> </div>

CSS Obyekt xususiyatiga oid batafsil ma'lumot uchun MDN tekshiring.

0
qo'shib qo'ydi
Tushundim! Yangilangan javobni ko'ring.
qo'shib qo'ydi muallif 5aledmaged, manba
"Agar sahifadagi tarkib 1 sahifadan ortiq bo'lsa" degani nimani anglatadi? Buni bir oz tushuntira olasizmi?
qo'shib qo'ydi muallif 5aledmaged, manba
Sahifa bitta sahifaga mos kelmaydigan tarkibga ega bo'lsa, biz sahifani pastga aylantirishimiz kerak. Bunday holatda, altbilgi tarkibning ustida qoladi.
qo'shib qo'ydi muallif rav, manba
Agar pozitsiyani aniq belgilab qo'ysam, sahifadagi kontent 1 sahifadan ortiq bo'lsa ham, altbilgi u erda qoladi
qo'shib qo'ydi muallif rav, manba

Use position: fixed; instead of position: absolute;. you will also need to add some bottom padding to your <body> in order to see full content, the value of this padding should be equal to your

's height.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body {
  height: 200vh;
  padding-bottom: 40px;
}

footer {
  left: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 40px;
  background: tomato;
}

this is the footer
</div> </div>

CSS Obyekt xususiyatiga oid batafsil ma'lumot uchun MDN tekshiring.

0
qo'shib qo'ydi
Tushundim! Yangilangan javobni ko'ring.
qo'shib qo'ydi muallif 5aledmaged, manba
"Agar sahifadagi tarkib 1 sahifadan ortiq bo'lsa" degani nimani anglatadi? Buni bir oz tushuntira olasizmi?
qo'shib qo'ydi muallif 5aledmaged, manba
Sahifa bitta sahifaga mos kelmaydigan tarkibga ega bo'lsa, biz sahifani pastga aylantirishimiz kerak. Bunday holatda, altbilgi tarkibning ustida qoladi.
qo'shib qo'ydi muallif rav, manba
Agar pozitsiyani aniq belgilab qo'ysam, sahifadagi kontent 1 sahifadan ortiq bo'lsa ham, altbilgi u erda qoladi
qo'shib qo'ydi muallif rav, manba

Use position: fixed; instead of position: absolute;. you will also need to add some bottom padding to your <body> in order to see full content, the value of this padding should be equal to your

's height.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body {
  height: 200vh;
  padding-bottom: 40px;
}

footer {
  left: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 40px;
  background: tomato;
}

this is the footer
</div> </div>

CSS Obyekt xususiyatiga oid batafsil ma'lumot uchun MDN tekshiring.

0
qo'shib qo'ydi
Tushundim! Yangilangan javobni ko'ring.
qo'shib qo'ydi muallif 5aledmaged, manba
"Agar sahifadagi tarkib 1 sahifadan ortiq bo'lsa" degani nimani anglatadi? Buni bir oz tushuntira olasizmi?
qo'shib qo'ydi muallif 5aledmaged, manba
Sahifa bitta sahifaga mos kelmaydigan tarkibga ega bo'lsa, biz sahifani pastga aylantirishimiz kerak. Bunday holatda, altbilgi tarkibning ustida qoladi.
qo'shib qo'ydi muallif rav, manba
Agar pozitsiyani aniq belgilab qo'ysam, sahifadagi kontent 1 sahifadan ortiq bo'lsa ham, altbilgi u erda qoladi
qo'shib qo'ydi muallif rav, manba

Olmali ma'lumotni pastki qismga qo'yib, pastki qavatning balandligini chiqarib olish uchun salbiy chekka chiziqlardan foydalanadigan va to'ldirishni ishlatuvchi sarmoyadorni yaratishingiz mumkin ...

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100vh;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -40px;
  /* Pad bottom by footer height */
  padding: 20px 20px 40px;
}

footer {
  height: 40px;
}

Namoyish

0
qo'shib qo'ydi

Buni ko'ring:

div#footer{
position:fixed;//important
bottom:0;//important
left:0;//important
width:100%
height:100px;
}

Misol uchun, JS Fiddle: https://jsfiddle.net/z72tLemr/

Qanday qilib ishlayotganligini ko'rsatish uchun qo'shimcha teglar va CSS-ni qo'shdim. Kalit pozitsiyadadir: qattiq; tugmachasini bosing. Kalit bu pozitsiyadandir: statsionar elementni brauzer oynasiga nisbatan joylashtiradi, shuning uchun aylantirilganda u joyida qoladi.

Bu erda joylashuv haqida ko'proq ma'lumot: https://www.w3schools.com/cssref/pr_class_position.asp

Umid qilamanki yordam beradi!

0
qo'shib qo'ydi
Agar pozitsiyani aniq belgilab qo'ysam, sahifadagi kontent 1 sahifadan ortiq bo'lsa ham, altbilgi u erda qoladi
qo'shib qo'ydi muallif rav, manba
Ha. Men allaqachon o'z ichiga olganman
qo'shib qo'ydi muallif rav, manba
Buni belgilashga harakat qilyapsizmi: html, body {height: 100%; }
qo'shib qo'ydi muallif Jordan Joseph, manba

Buni ko'ring:

div#footer{
position:fixed;//important
bottom:0;//important
left:0;//important
width:100%
height:100px;
}

Misol uchun, JS Fiddle: https://jsfiddle.net/z72tLemr/

Qanday qilib ishlayotganligini ko'rsatish uchun qo'shimcha teglar va CSS-ni qo'shdim. Kalit pozitsiyadadir: qattiq; tugmachasini bosing. Kalit bu pozitsiyadandir: statsionar elementni brauzer oynasiga nisbatan joylashtiradi, shuning uchun aylantirilganda u joyida qoladi.

Bu erda joylashuv haqida ko'proq ma'lumot: https://www.w3schools.com/cssref/pr_class_position.asp

Umid qilamanki yordam beradi!

0
qo'shib qo'ydi
Agar pozitsiyani aniq belgilab qo'ysam, sahifadagi kontent 1 sahifadan ortiq bo'lsa ham, altbilgi u erda qoladi
qo'shib qo'ydi muallif rav, manba
Ha. Men allaqachon o'z ichiga olganman
qo'shib qo'ydi muallif rav, manba
Buni belgilashga harakat qilyapsizmi: html, body {height: 100%; }
qo'shib qo'ydi muallif Jordan Joseph, manba

Buni ko'ring:

div#footer{
position:fixed;//important
bottom:0;//important
left:0;//important
width:100%
height:100px;
}

Misol uchun, JS Fiddle: https://jsfiddle.net/z72tLemr/

Qanday qilib ishlayotganligini ko'rsatish uchun qo'shimcha teglar va CSS-ni qo'shdim. Kalit pozitsiyadadir: qattiq; tugmachasini bosing. Kalit bu pozitsiyadandir: statsionar elementni brauzer oynasiga nisbatan joylashtiradi, shuning uchun aylantirilganda u joyida qoladi.

Bu erda joylashuv haqida ko'proq ma'lumot: https://www.w3schools.com/cssref/pr_class_position.asp

Umid qilamanki yordam beradi!

0
qo'shib qo'ydi
Agar pozitsiyani aniq belgilab qo'ysam, sahifadagi kontent 1 sahifadan ortiq bo'lsa ham, altbilgi u erda qoladi
qo'shib qo'ydi muallif rav, manba
Ha. Men allaqachon o'z ichiga olganman
qo'shib qo'ydi muallif rav, manba
Buni belgilashga harakat qilyapsizmi: html, body {height: 100%; }
qo'shib qo'ydi muallif Jordan Joseph, manba

Konteynerga nisbatan pozitsiyani belgilang va keyin manzil: mutlaq; pastki: 0; # footer uchun.

0
qo'shib qo'ydi
Statik joylashuvga ega bo'lmagan ota-onalar bo'lmasa, hujjatning tanasiga nisbatan mutlaq joylashishni aniqlash pozitsiyalari. Olmashining tananing tagida bo'lishi kerak bo'lsa, shuning uchun sizga biron bir maxsus konteyner kerak bo'lmasligiga aminman.
qo'shib qo'ydi muallif Ananth Rao, manba
agar bu nisbiy bo'lsa, sahifani to'ldirish uchun yetarli kontent bo'lmasa, footer yuqoriga ko'tariladi.
qo'shib qo'ydi muallif rav, manba