वेब पेज के निचले भाग पर बने रहने के लिए आपको पाद कैसे मिलेगा?

Question

मेरे पास एक साधारण 2-कॉलम लेआउट है जिसमें एक पाद लेख है जो मेरे मार्कअप में दाएं और बाएं दोनों को साफ करता है। मेरी समस्या यह है कि मुझे सभी ब्राउज़रों में पृष्ठ के निचले भाग पर रहने के लिए पाद नहीं मिल सकता है। यह काम करता है यदि सामग्री पाद लेख को नीचे धकेलती है, लेकिन हमेशा ऐसा नहीं होता है।

Comments

मैं @ जिमी को जोड़ूंगा: आपको उस तत्व को पूर्ण (या रिश्तेदार) स्थिति घोषित करने की आवश्यकता है जिसमें पाद लेख शामिल है। आपके मामले में, यह शरीर का तत्व है। संपादित करें: मैंने इसे

— फायरबग के

इस लिंक के अनुसार यो-पेज-टू-फुल- हाइट बढ़ाने के

— sina

Answer 1

एक चिपचिपा पाद पाने के लिए:

1. अपनी सामग्री के लिए एक <div>साथ class="wrapper"है।

2. जगह के बंद होने से ठीक पहले ।</div>wrapper<div class="push"></div>

3. जगह के बंद होने के ठीक बाद ।</div>wrapper<div class="footer"></div>

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Comments

@jlp: आपको फ़ॉर्म टैग को ऊँचाई पर जोड़ने की आवश्यकता है: 100% विवरण, अन्यथा यह चिपचिपा पाद को तोड़ देगा। इस तरह: html, बॉडी, फॉर्म {height: 100%;}

— dazbradbury

मैंने देखा कि पाद लेख को पैडिंग में जोड़ने से यह खराब हो जाता है, लेकिन यह पता लगा लिया कि {पाद लेख, धक्का} ऊंचाई से पाद पर अतिरिक्त गद्दी को घटाकर तय किया जा सकता है।

— nicooga

डेमो के साथ विस्तृत विवरण इस साइट में दिया गया है: CSS स्टिकी फूटर

— mohitp

अरे मैंने आपके कदमों का अनुसरण किया और यह बड़े पृष्ठों के लिए बहुत अच्छा काम करता है। लेकिन छोटे पृष्ठों पर जहां उपयोगकर्ता नीचे स्क्रॉल करने में सक्षम नहीं है, नीचे की तरफ थोड़ी दूर है। तो यह लगभग खाली पेज स्क्रॉल करता है। किसी को पता है कि इसे कैसे ठीक करना है? आप अपने परीक्षण पृष्ठ यहाँ देख सकते हैं sheltered-escarpment-6887.herokuapp.com

— Syk

@ मुझे पता चला है कि न्यूनतम ऊंचाई को कम करने से मदद मिलती है। 94% एक ठीक मूल्य है, लेकिन आप अभी भी मोबाइल पर इस मुद्दे को देखते हैं :( यकीन नहीं कि यहां एक वास्तविक समाधान है।

— ACK_stoverflow

Answer 2

CSS vh इकाइयों का उपयोग करें!

संभवतः एक स्पष्ट पाद लेख के बारे में जाने के लिए सबसे स्पष्ट और गैर-हैक करने का तरीका नई सीएसएस दर्शकों इकाइयों का उपयोग करना होगा ।

उदाहरण के लिए निम्नलिखित सरल मार्कअप लें:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

यदि शीर्ष लेख 80px उच्च और पाद 40px उच्च है, तो हम कंटेंट डिव पर एक एकल नियम के साथ अपने चिपचिपा पाद लेख बना सकते हैं :

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

जिसका अर्थ है: सामग्री div की ऊंचाई कम से कम होने दें 100% व्यूपोर्ट की ऊंचाई माइनस करें, हेडर और फुटर की संयुक्त हाइट्स।

बस।

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

... और यहां बताया गया है कि समान कोड सामग्री div में बहुत सारी सामग्री के साथ कैसे काम करता है:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

ध्यान दें:

1) हैडर और फुटर की ऊंचाई ज्ञात होनी चाहिए

2) IE (IE8-) और Android (4.4-) के पुराने संस्करण व्यूपोर्ट इकाइयों का समर्थन नहीं करते हैं। ( कैनीयूज़ )

3) एक बार वेबकिट में एक कैल्क नियम के भीतर व्यूपोर्ट इकाइयों के साथ एक समस्या थी। यह वास्तव में तय किया गया है ( यहां देखें) ) इसलिए वहां कोई समस्या नहीं है। हालाँकि यदि आप किसी कारण से कैल्क का उपयोग करने से बचना चाहते हैं, तो आप नकारात्मक मार्जिन का उपयोग कर सकते हैं और बॉक्स-साइज़िंग के साथ पैडिंग कर सकते हैं -

इस तरह:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

Comments

यह बहुत ही बेहतरीन समाधान है जो मैंने यहां देखा है, मेरे अजीब मामले में भी काम किया है। जो कि जाने-पहचाने-कारण के लिए पाद लेख में कुछ बह निकला है। और मुझे लगता है कि एसएएस और चर जैसे sth के साथ, यह कभी भी अधिक लचीला हो सकता है।

— themarketka

दरअसल, यह एक आकर्षण की तरह काम करता है। गैर-सहायक ब्राउज़रों के लिए भी कमबैक करना आसान है।

— अरमीर जूल

कैसे निरपेक्ष माप के साथ खिलवाड़ अभी भी हैक नहीं है? सबसे अच्छा यह शायद कम हैसी है

— जोनाथन

लेकिन अगर फुटर और हेडर की ऊंचाई प्रतिशत में है और पीएक्स नहीं है? पृष्ठ की ऊंचाई का 15% पसंद है?

— फर्नांडा ब्रूम लूसाडा

व्यूपोर्ट इकाइयाँ हमेशा उस मोबाइल ब्राउज़र पर अपेक्षा के अनुरूप काम नहीं करती हैं जो स्क्रॉल स्थिति के आधार पर एड्रेस बार को छिपाते हैं या दिखाते हैं

— इवगेनी

Answer 3

के साथ चिपचिपा पाद लेख display: flex

फिलिप वाल्टन के चिपचिपे पाद से प्रेरित समाधान ।

व्याख्या

यह समाधान केवल इसके लिए मान्य है :

• क्रोम .0 21.0
• फ़ायरफ़ॉक्स .0 20.0
• इंटरनेट एक्सप्लोरर ≥ 10
• सफारी ≥ 6.1

यह flexप्रदर्शन पर आधारित है , flex-growसंपत्ति का लाभ उठाता है , जो किसी तत्व को ऊंचाई या चौड़ाई (जब या तो सेट किया जाता है) या तो बढ़ने की अनुमति देता हैflow-directioncolumnrow कंटेनर में अतिरिक्त स्थान पर कब्जा क्रमशः जाता है) ।

हम उस vhइकाई का भी लाभ उठाने जा रहे हैं , जिसे इस रूप1vh में परिभाषित किया गया है :

व्यूपोर्ट की ऊंचाई का 1/100 वाँ भाग

इसलिए 100vhपूर्ण व्यूपोर्ट की ऊंचाई को पूरा करने के लिए एक तत्व बताने के लिए यह एक संक्षिप्त तरीका है।

इस तरह आप अपने वेब पेज को संरचित करेंगे:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

पृष्ठ के निचले भाग में पाद लेख को रखने के लिए, आप चाहते हैं कि शरीर और पाद के बीच की जगह उतनी ही बढ़े, जितना पृष्ठ के तल पर पाद लेख को धकेलने में लगता है।

इसलिए हमारा लेआउट बन जाता है:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

कार्यान्वयन

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

आप JSFiddle पर इसके साथ खेल सकते हैं ।

सफारी बुझती है

विदित हो कि सफारी में संपत्ति का त्रुटिपूर्ण क्रियान्वयन हैflex-shrink , जो सामग्री को प्रदर्शित करने के लिए आवश्यक न्यूनतम ऊंचाई से अधिक को सिकोड़ने की अनुमति देता है। इस समस्या को हल करने के लिए आप सेट करना होगा flex-shrinkकरने के लिए 0 करने के लिए स्पष्ट रूप से संपत्ति .contentऔर footerऊपर के उदाहरण में:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

Comments

मुझे लगता है कि यह सही उत्तर है, क्योंकि यह वास्तव में एकमात्र दृष्टिकोण है जो तब भी काम करता है जब पाद की ऊंचाई ज्ञात नहीं होती है।

— feastis

यह नीट 2 के साथ ग्रिड को गड़बड़ करता है

— हॉफचैट

लेकिन फिलिप वाल्टन के समाधान ही क्यों, एक अतिरिक्त "स्पेसर" तत्व क्यों नहीं?

— याकॉव

@YakovL वाल्टन के समाधान .Site-contentतत्व के रूप में एक ही भूमिका निभाता है spacer। इसे बस अलग तरह से कहा जाता है।

— घर्मन

@Gherman अच्छी तरह से, इस मार्कअप में .Site-contentएक एनालॉग .contentहै .. लेकिन कभी नहीं, मैंने केस के लिए पूछा gcedo इसके बारे में कुछ विशिष्ट विचार है, अनुमान लगाने की कोई आवश्यकता नहीं है

— YakovL

Answer 4

आप position: absoluteपृष्ठ के निचले भाग पर पाद लगाने के लिए निम्नलिखित का उपयोग कर सकते हैं , लेकिन फिर सुनिश्चित करें कि आपके 2 स्तंभों में उपयुक्त हो margin-bottomताकि वे पाद लेख द्वारा कभी भी बंद न हों।

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

Comments

मैंने अपने समान सेटअप (दो कॉलम + पाद) के साथ यह कोशिश की है और यह काम नहीं करता है।

— isomorphismes

यदि सामग्री बढ़ती है तो यह सामग्री के साथ ओवरलैप करता है।

— सत्य प्रकाश

इसलिए सामग्री में मार्जिन-तल है। आपको यह निर्धारित करना होगा कि आप जो भी ऊँचाई तय करते हैं, वह आपको पाद बनाते हैं।

— जिमी

इसके लायक क्या है, अगर कोई शून्य मान है, तो इससे कोई फर्क नहीं पड़ता कि यह किस मापक इकाई में है, कुछ भी नहीं है, इसलिए 0pxमैंने जो भी स्टाइलशेट देखे हैं, उनमें से सभी सिर्फ होना चाहिए 0।

— जोनाथन

क्या होगा यदि पृष्ठ की ऊंचाई प्रदर्शन की ऊंचाई या पाद की लंबाई सामग्री से अधिक है? इस समस्या के समाधान के लिए मेरा जवाब देखें।

— रविन्दर पायल

Answer 5

यहाँ jQuery के साथ एक समाधान है जो एक आकर्षण की तरह काम करता है। यह जांचता है कि खिड़की की ऊंचाई शरीर की ऊंचाई से अधिक है या नहीं। यदि यह है, तो यह क्षतिपूर्ति करने के लिए पाद लेख के मार्जिन-शीर्ष को बदल देता है। फ़ायरफ़ॉक्स, क्रोम, सफारी और ओपेरा में परीक्षण किया गया।

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

यदि आपके पाद में पहले से ही मार्जिन-टॉप (50 पिक्सेल का, उदाहरण के लिए) है तो आपको इसके लिए अंतिम भाग को बदलना होगा:

css( 'margin-top', height_diff + 50 )

Comments

एक विकल्प पाद लेख से पहले एक "ढकेलनेवाला" div जोड़ना है। फिर पुशर डिव की ऊंचाई निर्धारित करें। यह मौजूदा मार्जिन-टॉप

— सरसापारिला

कोई जवाब नहीं समाधान के लिए मेरा जवाब देखें।

— घाट

Answer 6

इसके लिए CSS सेट करें #footer:

position: absolute;
bottom: 0;

फिर आप एक जोड़ने की आवश्यकता होगी paddingया marginअपने की तह तक #sidebarऔर #contentकी ऊंचाई मैच के लिए #footerया जब वे ओवरलैप, #footerउन्हें कवर किया जाएगा।

इसके अलावा, अगर मुझे सही याद है, तो IE6 को bottom: 0CSS की समस्या है । आपको IE6 के लिए JS समाधान का उपयोग करना पड़ सकता है (यदि आपको IE6 की परवाह है)।

Comments

जब खिड़की बहुत छोटी होती है, तो पाद लेख इस सीएसएस के साथ सामग्री के सामने दिखाता है।

— सेचि

मेरे उत्तर को देखें @Seichi

— ferit

Answer 7

@Gcedo के लिए एक समान समाधान लेकिन पाद लेख को नीचे धकेलने के लिए एक मध्यवर्ती सामग्री जोड़ने की आवश्यकता के बिना। हम केवल margin-top:autoपाद लेख में जोड़ सकते हैं और यह पृष्ठ की तह तक धकेल दिया जाएगा, भले ही उसकी ऊंचाई या ऊपर की सामग्री की ऊंचाई हो।

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

Comments

एक और दृष्टिकोण यह होगा कि .content flex: 1 0 auto;इसे बढ़ने योग्य और गैर-चमकदार बनाने के लिए दिया जाए, लेकिन margin-top: auto;यह एक अच्छी चाल है जिसमें स्टाइलिंग पाद शामिल है, न कि "गैर-संबंधित" .contentजो अच्छा है। वास्तव में, मुझे आश्चर्य है कि इस दृष्टिकोण में फ्लेक्स की आवश्यकता क्यों है ..

— याकोवएल

@YakovL यहाँ मुख्य विचार मार्जिन-टॉप ट्रिक है;) मुझे पता है कि मैं इस तरह की सामग्री बना सकता हूं, लेकिन यह लगभग पिछले उत्तर की तरह ही होगा जहां विचार सामग्री द्वारा पाद लेख को धक्का देना है ... और यहाँ मैं इससे बचना चाहता था और केवल मार्जिन के साथ पाद को धक्का देना चाहता था;)

— फ़ासले

मार्जिन के लिए @YakovL फ्लेक्स की आवश्यकता है: ऑटो :) हम इसे इसके बिना उपयोग नहीं कर सकते ... मार्जिन के रूप में: ऑटो फ्लेक्स आइटम के साथ थोड़ा अलग व्यवहार करता है फिर आइटम ब्लॉक करता है। यदि आप निकालते हैंdisplay:flex इसे यह काम नहीं करेगा, आपके पास

— टेमानी आफि

हाँ, मैं देख सकता हूँ कि यह इसके बिना काम नहीं करेगा, लेकिन मुझे समझ नहीं आ रहा है कि ("थोड़ा अलग" क्या है)

— याकॉव

@YakovL यह सरल है, सामान्य ब्लॉक तत्व का उपयोग करते हुए प्रवाह हमेशा एक पंक्ति दिशा है इसलिए केवल ऑटो के साथ उपयोग किए जाने वाले मार्जिन राइट / लेफ्ट काम करेंगे (जैसे कि margin:0 autoब्लॉक ब्लॉक तत्व के लिए प्रसिद्ध ) लेकिन हमारे पास कोई स्तंभ दिशा नहीं है इसलिए कोई मार्जिन नहीं है ऑटो ऊपर / नीचे के साथ। Flexbox में पंक्ति / स्तंभ दिशा दोनों है;)। यह मामूली अंतर है, लेकिन मार्जिन का उपयोग फ्लेक्सबॉक्स के भीतर तत्व को संरेखित करने के लिए भी किया जाता है, यहां तक ​​कि एक पंक्ति दिशा के भीतर भी आप लंबवत संरेखित करने के लिए मार्जिन-टॉप / बॉटम ऑटो का उपयोग कर सकते हैं। आप यहां और अधिक पढ़ सकते हैं: w3.org/TR/css- फ्लेक्सबॉक्स -1 / # ऑटो-मार्जिन

— तैमनी Afif

Answer 8

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</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 */
}

स्रोत: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Answer 9

मैंने कभी-कभी खुद भी इससे संघर्ष किया है और मैंने हमेशा पाया है कि एक दूसरे के भीतर उन सभी डिव के साथ समाधान एक गन्दा समाधान था। मैं बस इसके साथ थोड़ा गड़बड़ कर दिया, और मुझे व्यक्तिगत रूप से पता चला कि यह काम करता है और यह निश्चित रूप से सबसे सरल तरीकों में से एक है:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

इसके बारे में मुझे जो पसंद है वह यह है कि किसी भी अतिरिक्त HTML को लागू करने की आवश्यकता नहीं है। आप बस इस CSS को जोड़ सकते हैं और फिर जब चाहें अपना HTML लिख सकते हैं

Comments

इसने मुझे काम किया, हालाँकि मैंने चौड़ाई जोड़ी: 100% फुटर तक।

— विक्टर.उद्यक

Answer 10

चूंकि ग्रिड समाधान अभी तक प्रस्तुत नहीं किया गया है, यहाँ यह सिर्फ दो घोषणाओं के साथ है मूल तत्व के लिए , अगर हम इसके लिए height: 100%और margin: 0:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}

<div class="content">Content</div>
<footer>Footer</footer>

• align-content: space-between

आइटम समान रूप से क्रॉस अक्ष के साथ संरेखण कंटेनर के भीतर वितरित किए जाते हैं। आसन्न वस्तुओं के प्रत्येक जोड़े के बीच अंतर समान है। पहला आइटम मुख्य-प्रारंभ किनारे के साथ फ्लश है, और अंतिम आइटम मुख्य-छोर किनारे के साथ फ्लश है।

Answer 11

सीएसएस:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

यदि आप पृष्ठ के निचले भाग में संरेखित एक उत्तरदायी पाद की तलाश कर रहे हैं, तो यह चाल चलनी चाहिए, जो हमेशा व्यूपोर्ट ऊंचाई के 80% के शीर्ष-मार्जिन को बनाए रखती है।

Answer 12

निम्नलिखित चरणों का उपयोग करके किसी भी रिज़ॉल्यूशन पर एक चिपचिपा पाद लेख बनाने के लिए पूर्ण स्थिति और z- इंडेक्स का उपयोग करें:

• position: absolute; bottom: 0;वांछित ऊंचाई और वांछित ऊंचाई बनाएं
• सामग्री तल और विंडो तल के बीच व्हाट्सएप को जोड़ने के लिए पाद की गद्दी सेट करें
• एक कंटेनर बनाएं divजो शरीर की सामग्री को लपेटता हैposition: relative; min-height: 100%;
• मुख्य सामग्री में नीचे पैडिंग जोड़ें div जो कि पाद की ऊंचाई और पैडिंग के बराबर है
• यदि पाद बंद हो जाता है, तो z-indexकंटेनर से अधिक पाद का सेट करेंdiv

यहाँ एक उदाहरण है:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

Answer 13

इस सवाल के लिए मैंने जो उत्तर देखे हैं उनमें से कई क्लिंक हैं, जिन्हें लागू करना कठिन और अक्षम है इसलिए मैंने सोचा कि मैं इस पर एक शॉट लूंगा और अपने स्वयं के समाधान के साथ आऊंगा जो कि बस एक छोटा सा सीएसएस और HTML है

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

यह पाद की ऊंचाई निर्धारित करके काम करता है और फिर सीएसएस कैल्क का उपयोग करके न्यूनतम ऊंचाई तक काम करने के लिए पृष्ठ पाद लेख के साथ नीचे तल पर हो सकता है, आशा है कि यह कुछ लोगों की मदद करता है :)

Answer 14

एक समाधान बक्से के लिए न्यूनतम ऊंचाई निर्धारित करना होगा। दुर्भाग्य से ऐसा लगता है कि यह IE (आश्चर्य) द्वारा अच्छी तरह से समर्थित नहीं है।

Answer 15

इनमें से कोई भी शुद्ध सीएसएस समाधान गतिशील रूप से आकार देने वाली सामग्री (कम से कम फ़ायरफ़ॉक्स और सफारी पर) के साथ ठीक से काम करता है, उदाहरण के लिए, यदि आपके पास कंटेनर div पर एक पृष्ठभूमि सेट है, तो पृष्ठ और फिर div (अंदर कुछ पंक्तियाँ) तालिका का आकार बदल देता है। तालिका स्टाइल क्षेत्र के नीचे से बाहर छड़ी कर सकती है, अर्थात, आपके पास ब्लैक थीम पर सफेद में आधी मेज और आधी तालिका पूर्ण सफेद हो सकती है, क्योंकि फ़ॉन्ट-रंग और पृष्ठभूमि रंग दोनों ही सफेद हैं। यह मूल रूप से थीमर पृष्ठों के साथ अविश्वसनीय है।

नेस्टेड डिव मल्टी-कॉलम लेआउट एक बदसूरत हैक है और चिपके हुए पाद के लिए 100% न्यूनतम ऊंचाई बॉडी / कंटेनर डिव एक बदसूरत हैक है।

केवल एक ही लिपि-लिपि समाधान, जो मेरे द्वारा आजमाए गए सभी ब्राउज़रों पर काम करता है: थ्रेड (हेडर के लिए) / tfoot (पाद लेख के लिए) / tbody (किसी भी संख्या में कॉलम के लिए) और 100% ऊंचाई के साथ एक बहुत सरल / छोटी तालिका। लेकिन इसका अर्थ सिमेंटिक है और एसईओ नुकसान (tfoot tbody से पहले प्रकट होना चाहिए। ARIA भूमिकाएं हालांकि अच्छे खोज इंजन की मदद कर सकती हैं)।

Answer 16

कई लोगों ने इस सरल समस्या का जवाब यहां दिया है, लेकिन मेरे पास एक बात जोड़ने के लिए है, यह देखते हुए कि जब तक मैं गलत नहीं कर रहा था, तब तक मैं कितना निराश था।

जैसा कि ऐसा करने का सबसे सरल तरीका बताया गया है।

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

हालाँकि संपत्ति का उल्लेख पदों में नहीं है, संभवतः क्योंकि यह आमतौर पर डिफ़ॉल्ट है, स्थिति है: स्थिर शरीर टैग पर । स्थिति रिश्तेदार काम नहीं करेगा!

मेरे वर्डप्रेस थीम ने डिफ़ॉल्ट बॉडी डिस्प्ले को ओवरराइड कर दिया था और इसने मुझे एक लंबे समय के लिए भ्रमित कर दिया था।

Answer 17

एक पुराना धागा जो मुझे पता है, लेकिन यदि आप एक उत्तरदायी समाधान की तलाश कर रहे हैं, तो यह jQuery जोड़ मदद करेगा:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

पूर्ण गाइड यहां पाया जा सकता है: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Answer 18

मैंने एक बहुत ही सरल पुस्तकालय बनाया है https://github.com/ravinderpayal/FooterJS

यह उपयोग में बहुत सरल है। लाइब्रेरी को शामिल करने के बाद, बस इस कोड को कॉल करें।

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

विभिन्न पैरामीटर / आईडी के साथ उपरोक्त फ़ंक्शन को याद करके पादों को गतिशील रूप से बदला जा सकता है।

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

नोट: - आप किसी भी CSS को बदल या जोड़ नहीं सकते हैं। लाइब्रेरी डायनामिक है जिसका अर्थ है कि पेज लोड करने के बाद भी यदि स्क्रीन को आकार दिया जाता है तो यह पाद की स्थिति को रीसेट कर देगा। मैंने इस लाइब्रेरी को बनाया है, क्योंकि CSS थोड़ी देर के लिए समस्या को हल करती है लेकिन जब डिस्प्ले का आकार काफी हद तक डेस्कटॉप से ​​टैबलेट या इसके विपरीत बदल जाता है, तो वे या तो सामग्री को ओवरलैप कर देते हैं या वे अब चिपचिपे नहीं रह जाते हैं।

एक अन्य समाधान सीएसएस मीडिया क्वेरी है, लेकिन आपको अलग-अलग सीएसएस शैलियों को स्क्रीन के विभिन्न आकार के लिए मैन्युअल रूप से लिखना होगा, जबकि यह लाइब्रेरी स्वचालित रूप से अपना काम करती है और सभी बुनियादी जावास्क्रिप्ट समर्थन ब्राउज़र द्वारा समर्थित है।

CSS समाधान संपादित करें :

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

अब, यदि प्रदर्शन की ऊंचाई आपकी सामग्री की लंबाई से अधिक है, तो हम पाद को नीचे की ओर तय कर देंगे और यदि नहीं, तो यह स्वचालित रूप से प्रदर्शन के बहुत अंत में दिखाई देगा, क्योंकि आपको यह देखने के लिए स्क्रॉल करने की आवश्यकता है।

और, यह जावास्क्रिप्ट / पुस्तकालय से बेहतर समाधान लगता है।

Answer 19

मुझे इस पृष्ठ पर पहले सुझाए गए समाधानों के साथ कोई भाग्य नहीं था, लेकिन आखिरकार, इस छोटी सी चाल ने काम किया। मैं इसे एक और संभावित समाधान के रूप में शामिल करूंगा।

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Answer 20

फ्लेक्सबॉक्स समाधान

प्राकृतिक हेडर और फूटर हाइट्स के लिए फ्लेक्स लेआउट को प्राथमिकता दी जाती है। यह फ्लेक्स समाधान आधुनिक ब्राउज़रों में परीक्षण किया गया है और वास्तव में IE11 में :) काम करता है।

जेएस फिडल देखें ।

एचटीएमएल

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

सीएसएस

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

Answer 21

मेरे लिए इसे प्रदर्शित करने का सबसे अच्छा तरीका है (पाद) नीचे की ओर चिपका हुआ है लेकिन हर समय सामग्री को कवर नहीं कर रहा है:

#my_footer {
    position: static
    fixed; bottom: 0
}

Comments

क्या यह वाक्यविन्यास सही है? क्या स्थिति को स्थिर या निश्चित माना जाता है?

— स्टील्थेंनिजा

Answer 22

jQuery के क्रॉस बस्टर कस्टम प्लगिन - $ .footerBottom ()

या जैसे मैं करता हूं jQuery का उपयोग करें, और अपने पाद ऊंचाई को autoया पर सेट करेंfix , जो कुछ भी आप की तरह है, यह वैसे भी काम करेंगे। यह प्लगइन jQuery चयनकर्ताओं का उपयोग करता है इसलिए इसे काम करने के लिए, आपको अपनी फ़ाइल में jQuery लाइब्रेरी को शामिल करना होगा।

यहाँ बताया गया है कि आप प्लगइन कैसे चलाते हैं। JQuery आयात करें, इस कस्टम jQuery प्लगइन के कोड को कॉपी करें और jQuery आयात करने के बाद इसे आयात करें! यह बहुत सरल और बुनियादी है, लेकिन महत्वपूर्ण है।

जब आप इसे करते हैं, तो आपको बस यह कोड चलाना है:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

दस्तावेज़ तैयार घटना के अंदर इसे रखने की कोई आवश्यकता नहीं है। यह जैसा है वैसा ही चलेगा। यह पृष्ठ लोड होने पर और खिड़की के आकार बदलने पर आपके पाद की स्थिति को पुनर्गणना देगा।

यहां प्लगइन का कोड है जिसे आपको समझना नहीं है। बस इसे लागू करना जानते हैं। यह आपके लिए काम करता है। हालांकि, अगर आपको यह जानना पसंद है कि यह कैसे काम करता है, तो बस कोड के माध्यम से देखें। मैंने आपके लिए टिप्पणियाँ छोड़ दीं।

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5

/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

Comments

वेनिला जावा-स्क्रिप्ट प्लगइन की तुलना में कम लंबा है।

— रविंदर पायल

Answer 23

फ्लेक्स सॉल्यूशंस ने मेरे लिए फूटर चिपचिपा बनाने का काम किया, लेकिन दुर्भाग्य से फ्लेक्स लेआउट का उपयोग करने के लिए शरीर को बदलने से हमारे कुछ पेज लेआउट में बदलाव हुआ, और बेहतर के लिए नहीं। आखिरकार मेरे लिए क्या काम किया गया:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

मुझे यह ctf0 की प्रतिक्रिया से मिला https://ts-tricks.com/couple-takes-sticky-booter/

Answer 24

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   border: 3px solid #73AD21;
}

<body style="height:1500px">

   <h2>position: fixed;</h2>

   <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

   <div class="fixed">
      This div element has position: fixed;
   </div>

</body>

Answer 25

यदि आप इसे निर्धारित स्थिति का उपयोग नहीं करना चाहते हैं, और आप मोबाइल पर गुस्सा कर रहे हैं, तो यह मेरे लिए अब तक काम कर रहा है।

html {
    min-height: 100%;
    position: relative;
}

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

बस html को min-height: 100%;और position: relative;फिर सेट करेंposition: absolute; bottom: 0; left: 0; पाद पर। मैंने तब सुनिश्चित किया कि पाद शरीर में अंतिम तत्व था।

मुझे पता है अगर यह किसी और के लिए काम नहीं करता है, और क्यों। मुझे पता है कि ये थकाऊ शैली के हैक विभिन्न परिस्थितियों में अजीब व्यवहार कर सकते हैं जिनके बारे में मैंने नहीं सोचा था।

Answer 26

कंटेंट और साइडबार के चारों ओर कंटेनर डिव (ओवरफ्लो: ऑटो) लगाने की कोशिश करें।

यदि वह काम नहीं करता है, तो क्या आपके पास कोई स्क्रीनशॉट या उदाहरण लिंक हैं जहां पाद ठीक से प्रदर्शित नहीं हुआ है?