दिलचस्प पोस्ट
स्कीमा स्थान या noNamespaceSchemaLocation का उपयोग करके XSD से एक्सएमएल लिंक कैसे करें? VS2010 Windows के 64-बिट संस्करण पर WinForms अनुप्रयोग में अप्रतिबंधित अपवाद संदेश नहीं दिखाता है एएनएसआई बनाम गैर- ANSI एसक्यूएल शामिल वाक्यविन्यास Python के द्वारा फ़ाइल में पाठ को कैसे खोज और प्रतिस्थापित करना है? अजगर में फ़ाइल की पहली एन लाइनें पढ़ें Python के सुपर () कई विरासत के साथ कैसे काम करता है? एक खाली डेटा। फ्रेम बनाएं एडीओ। नेट ईएफ – मॉडल के पहले दृष्टिकोण में विदेशी कुंजी संबंध को परिभाषित करने के लिए कैसे? कैसे जाँचने के लिए कि क्या स्ट्रिंग जावा में संख्यात्मक है जब मैं अपनी वेबसाइट को रीफ़्रेश करता हूं मुझे 404 मिलता है। यह अंगुलर 2 और फायरबेस के साथ है उद्देश्य-सी में मजबूत और कमजोर के बीच अंतर JSlint त्रुटि 'एक लूप के भीतर कार्य न करें।' केवल जावास्क्रिप्ट के बारे में प्रश्न करता है एचटीएमएल फार्म डेटा का इस्तेमाल करते हुए एक जे.एस.ए. किसी भी प्रकार से एक वैकल्पिक मूल्य कैसे खोलें? एएसपी.नेट एमवीसी – सभी रूट और डिफॉल्ट रूट को पकड़ो

वेब पेज के नीचे रहने के लिए आप पाद लेख कैसे प्राप्त कर सकते हैं?

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

अद्यतन करें:

यह फ़ायरफ़ॉक्स में ठीक से काम नहीं कर रहा है मैं पाद लेख के नीचे पृष्ठभूमि रंग की एक पट्टी देख रहा हूं, जब पेज पर पर्याप्त सामग्री नहीं है जिससे पाद लेख को ब्राउजर खिड़की के निचले भाग में नीचे धकेल दिया जाए। दुर्भाग्यवश, यह पृष्ठ की डिफ़ॉल्ट स्थिति है।

वेब के समाधान से एकत्रित समाधान "वेब पेज के नीचे रहने के लिए आप पाद लेख कैसे प्राप्त कर सकते हैं?"

स्टिकी पादलेख:

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

  2. wrapper के समापन से पहले </div> <div class="push"></div>

  3. wrapper के बंद होने के ठीक बाद </div> <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 */ } 

सीएसएस वीएच इकाइयों का उपयोग करें!

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

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

 <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> 

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

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

display: flex साथ स्टिकी पादलेख display: flex

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

व्याख्या

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

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

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

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

व्यूपोर्ट की ऊंचाई का 1/100 हिस्सा

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

आप अपने वेब पेज की संरचना कैसे करेंगे:

 ----------- body ----------- ---------------------------- ---------- footer ---------- ---------------------------- 

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

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

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

कोड

उपर्युक्त वर्णित विधि निम्नानुसार कार्यान्वित की गई है

एचटीएमएल

 <html> <body> <div class="content" /> <div class="spacer" /> <footer class="footer" /> </body> </html> 

सीएसएस

 body { display: flex; flex-direction: column; min-height: 100vh; } .spacer { flex: 1; } 

आप JSFiddle को देख सकते हैं

सफारी क्वार्क्स

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

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

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

 position: absolute; bottom: 0; 

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

साथ ही, अगर मुझे सही याद है, तो आईई 6 में bottom: 0 समस्या है bottom: 0 सीएसएस आपको IE6 के लिए जेएस समाधान का उपयोग करना पड़ सकता है (यदि आप IE6 के बारे में ध्यान रखते हैं)

यहां 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 ) 

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

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

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

  <!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> 

सामग्री और साइडबार के आसपास एक कंटेनर डिवा (अतिप्रवाह: ऑटो के साथ) डालने का प्रयास करें

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

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

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

संपादित करें: मैंने इसे अपने पृष्ठ पर फायरबग के साथ परीक्षण किया और यह बहुत अच्छी तरह से काम करता था …

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

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

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

सीएसएस:

  #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% का शीर्ष-मार्जिन रखता है।

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

 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> 

यहाँ एक अस्थायी चिपचिपा पाद लेख वाला एक साइट है जो तकनीकी रूप से प्रभावशाली है (चाहे आप सटीक सौंदर्यशास्त्र की तरह हो या नहीं):

http://alltop.com/

(IE में फ्लोटिंग पाद लेख को देखने के लिए विज्ञान जैसी श्रेणी के माध्यम से क्लिक करें)

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

कम कलाकार उधार लेते हैं, महान कलाकार चोरी करते हैं
– स्टीव जॉब्स
(पाब्लो पिकासो का हवाला देते हुए)

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

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

 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; } 

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

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

jQuery क्रॉस्ब्राउज़र कस्टम प्लगइन – $। पैपरबुटॉम ()

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

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

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

 $.footerBootom({target:"footer"}); //as html5 tag <footer>. // You can change it to your prefered "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($) { $.footerBootom = function(options) { //or use "$.fn.footerBootom" or "$.footerBootom" to call it globaly directly from $.footerBootom(); 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 heigth on body element $(options.target).css('height', footerOuterHeight + "!important"); //set outerHeight of footer element to ... footer console.log("jQ custom plugin footerBottom runs"); // disply 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 $.footerBootom(); //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> <!-- structure dont matter much you will always have html and body tag just make sure to point to your footer as neede if you use html5 as it should just do nothing run plugin with no settings it will work by default with <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> 

एक पुरानी धागा मुझे पता है, लेकिन अगर आप एक उत्तरदायी समाधान की तलाश कर रहे हैं, तो यह 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/

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

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

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

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

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

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

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

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

 @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; } } 

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

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

मेरे इस पेज पर दिए गए समाधानों के साथ कोई नसीब नहीं था, लेकिन आखिरकार, यह छोटी सी चीज काम करती थी। मैं इसे एक और संभव समाधान के रूप में शामिल करूँगा

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

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

फ्लेक्स लेआउट प्राकृतिक हेडर और पाद लेख ऊंचाइयों के लिए पसंद किया जाता है। यह फ़्लेक्स समाधान आधुनिक ब्राउज़रों में परीक्षण किया जाता है और वास्तव में 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; } 

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

 html { position: relative; } html, body { margin: 0; padding: 0; min-height: 100%; } footer { position: absolute; bottom: 0; } 

मैं इस बारे में क्या पसंद करता हूं कि कोई अतिरिक्त HTML को लागू नहीं किया जाना चाहिए। आप बस इस सीएसएस को जोड़ सकते हैं और फिर अपने एचटीएमएल को जब भी कहते हैं, लिख सकते हैं

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

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