पृष्ठ के निचले भाग में फ़्लशिंग पाद, ट्विटर बूटस्ट्रैप

Question

मैं आमतौर पर सीएसएस का उपयोग कर एक पाद को फ्लश करने की तकनीक से परिचित हूं।

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

Comments

नीचे दिए गए सभी उत्तरों का परीक्षण करने से पहले, ओपी चाहता है कि वह ट्विटर बूटस्ट्रैप के साथ काम करना चाहता है। क्योंकि यह एक जरूरी नहीं है, ट्विटर बूटस्ट्रैप, जेक्वेरी के साथ काम करता है, इसका मतलब है कि जावास्क्रिप्ट सक्षम है। इस कारण से सिर्फ मेरे जवाब का परीक्षण करें: stacklflow.com / प्रश्न / १०० ९९ ४२२ /…

— हेनरीडब्ल्यू

आधिकारिक उदाहरण: getbootstrap.com/examples/sticky-footer-navbar/…

— उपयोगकर्ता

लिंक टूट गया है! क्या कोई कृपया आधिकारिक उदाहरण लिंक को ठीक कर सकता है?

— PassionInfinite

@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar यह भविष्य में 4.0 i अनुमान के कारण पुराना संस्करण बन सकता है।

— अम्माद खालिद

Answer 1

मिली के टुकड़े यहाँ बूटस्ट्रैप के लिए वास्तव में अच्छी तरह से काम करता है

एचटीएमएल:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

सीएसएस:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
} 

Comments

यह मेरा अब तक का सबसे अच्छा समाधान है। इसे उत्तर के रूप में स्वीकार किया।

— केल्विन चेंग

नमस्ते, मैंने इस विधि को कार्यान्वित किया है, यह बहुत अच्छा काम करता है लेकिन अब मुझे iphone पर पृष्ठ प्रदर्शित करने में कुछ समस्याएँ आई हैं (पेज ज़ूम इन है)। किसी भी विचार समस्या क्या है? यहाँ कुछ विवरण है: stackoverflow.com/questions/18621090/…

— pupadupa

बस इस मामले में आपने इस उत्तर को पढ़ा है और नीचे स्क्रॉल नहीं किया है, यह अन्य उत्तरों को देखने लायक है

— MattyW

विशेष रूप से यह एक: stackoverflow.com/questions/10099422/…

— हेनरीडब्ल्यू

यह सबसे अच्छा तरीका है जो मैंने बूटस्ट्रैप के लिए पाया है। डिवाइस रिस्पॉन्सिबिलिटी के लिए #main और .footer हाइट को अलग-अलग स्क्रीन साइज में अपडेट करने के लिए मीडिया क्वैश्चंस का इस्तेमाल करना याद रखें

— SyntaxGoonoo

Answer 2

यह अब बूटस्ट्रैप 2.2.1 के साथ शामिल है।

बूटस्ट्रैप 3.x

नावबार घटक का उपयोग करें और .navbar-fixed-bottomकक्षा जोड़ें :

<div class="navbar navbar-fixed-bottom"></div>

बूटस्ट्रैप 4.x

<div class="navbar fixed-bottom"></div>

जोड़ने के लिए मत भूलना body { padding-bottom: 70px; }या अन्यथा पृष्ठ सामग्री को कवर किया जा सकता है।

डॉक्स: http://getbootstrap.com/compenders/#navbar-fixed-bottom

Comments

@ChuanYeong दुर्भाग्य से कोई नहीं है navbar-static-bottom।

— लॉरेंस वुडमैन

@ माइक कैरी से उन्होंने एक निश्चित पाद लेख के बारे में नहीं पूछा, लेकिन एक ऐसा स्थान जो खाली स्थान को "भरता" है, यदि आपके पृष्ठ में पाद लेख को नीचे रखने के लिए पर्याप्त सामग्री नहीं है। यदि आपका पाद केवल सूचनात्मक है, तो निश्चित एक ही मूल्यवान स्थान ले रहा है।

— rdlu

यह चिपचिपा पाद नहीं है, क्योंकि इसका उपयोग किया जाता है स्थिति: निश्चित; जो ठीक नहीं है

— फुरकैट यू।

हां, यह समाधान केवल व्यूपोर्ट के निचले भाग में जाता है, न कि पृष्ठ के नीचे। यानी पाद हमेशा दिखाई देता है।

— rism

जवाब देना पड़ा क्योंकि यह भ्रम देता है। ओपी एक चिपचिपा पाद नहीं चाहता है।

— हेनरीडब्ल्यू

Answer 3

ट्विटर बूटस्ट्रैप के लिए एक काम करने वाला उदाहरण STICKY FOOTER नहीं है

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

संस्करण जो हमेशा उपयोगकर्ता के अपडेट में होता है, devtools खोलता है या विंडो का आकार बदलता है।

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

आपको कम से कम एक तत्व की आवश्यकता है #footer

जब स्क्रॉलबार नहीं चाहता है तो सामग्री स्क्रीन पर फिट होगी बस 10 से 0 के मान को बदलें
यदि सामग्री स्क्रीन पर फिट नहीं होती है तो स्क्रॉलबार दिखाई देगा।

Comments

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

— meecect

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

— डेव

यह मेरे लिए अपेक्षित होने के साथ-साथ चुपचाप काम भी करता था, फिर भी, बेहतर उत्तरों में से एक, मैंने अपने मुद्दे को बदल कर तय $('#footer').height();किया$('#footer').outerHeight();

— DarkMukke

बहुत बढ़िया जवाब! मेरे पास कुछ अनुकूलन थे जो मुझे लगता है कि इसमें सुधार हुआ है: stackoverflow.com/a/36385654/8207

— Cory

सबसे अच्छा जवाब मुझे मिला है। यदि आप चाहते हैं कि यह विंडो आकार बदलने के बाद काम करे तो मुख्य कोड को उत्तर के अंदर से डालें $(window).resize(function() {//main code goes here});और $(window).resize();पृष्ठ लोड होने पर इसे सेट करने के लिए आह्वान करें।

— सिजमन सादेलो

Answer 4

यहां देखें कि इसे आधिकारिक पृष्ठ से कैसे लागू किया जाए:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

मैंने अभी इसका परीक्षण किया है और यह बहुत अच्छा है! :)

एचटीएमएल

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

प्रासंगिक सीएसएस कोड यह है:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

Comments

इसे पोस्ट करने के लिए धन्यवाद, यह निश्चित रूप से मेरे विशेष प्रोजेक्ट के लिए सबसे अच्छा समाधान था (केवल एक ही काम करने का उल्लेख नहीं), और निश्चित रूप से यह अच्छा है कि यह सीधे प्रोजेक्ट से ही है।

— कोरी डब्ल्यू।

मुझे नहीं पता कि सौदा क्या था, लेकिन मैं इसे पृष्ठों पर स्क्रॉल किए बिना काम पर नहीं ला सका। मैंने .wrapper CSS को बदलना शुरू किया, इसलिए न्यूनतम ऊंचाई "calc (100% - 120px)" थी, जहाँ 120px मेरे पाद की ऊँचाई है और html से <div id = "push"> </ div> को हटा दिया गया चूँकि यह ऊँचाई को उस पृष्ठ से जोड़ने के लिए कुछ भी नहीं करता था जिसकी मुझे आवश्यकता नहीं थी।

— jammyman34

Answer 5

के लिए स्टिकी पाद हम दो का उपयोग DIV'sबुनियादी के लिए HTML में चिपचिपा पाद प्रभाव। इस तरह लिखें:

एचटीएमएल

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

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

सीएसएस

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

Comments

उन्होंने कहा कि वह ट्विटर बूटस्ट्रैप का उपयोग कर रहे हैं। HTML को पूरी तरह से लिखे बिना बूटस्ट्रैप में इसे एकीकृत करने का सबसे आसान तरीका क्या होगा?

— कोड़ी ग्रे

अगर ओपी स्टिकी फूटर इफेक्ट हासिल करना चाहता है तो उसे अपना मार्कअप बदलना होगा

— संदीप

धन्यवाद! यह एकमात्र तरीका है जो वास्तव में मेरे लिए ASP.NET MVC5 साइट में काम करता है जो बूटस्ट्रैप का उपयोग करता है। +1

— यन दुरान

Answer 6

बहुत सरल आधिकारिक उदाहरण: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

Answer 7

वैसे मुझे मिक्स navbar-innerएंड ऑफ मिलाnavbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

यह अच्छा लगता है और मेरे लिए काम करता है

में उदाहरण देखें Fiddle

Comments

सबसे सरल और सबसे सुंदर समाधान। घर का

— लेयर

मैंने इसका इस्तेमाल किया, और स्क्रीन के मुकाबले छोटे पृष्ठों वाले पुराने एंड्रॉइड (froy शायद?) पर एक समस्या थी। अन्यथा यह FF, क्रोम, IE11, iPhone, nexus 7.

— bnieland

एकदम सही और बेहद सरल!

— ramires.cabral

Answer 8

बूटस्ट्रैप 4.3 के नवीनतम संस्करण में, यह .fixed-bottomकक्षा का उपयोग करके किया जा सकता है ।

<div class="fixed-bottom"></div>

यहाँ मैं पाद लेख के साथ इसका उपयोग कैसे करूँ:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

आप यहां स्थिति प्रलेखन में अधिक जानकारी पा सकते हैं ।

Comments

यह अभी भी आधिकारिक 4 संस्करण के साथ काम करता है।

— क्लेविस

ध्यान दें कि getbootstrap.com/docs/4.1/examples/sticky-footer पर उदाहरण में पाद-तत्व पर एक पंक्ति-ऊंचाई = 60px शैली है। यह न केवल अनावश्यक है, यह फूटर को ठीक से काम करने से रोकता है यदि यह एक या अधिक दिव्य तत्वों का जनक है, जो कि आमतौर पर मामला है।

— स्कूटीबी

Answer 9

हेनरीडब्ल्यू का जवाब अच्छा है, हालांकि मुझे यह काम करने के लिए कुछ मोड़ की आवश्यकता थी कि मैं कैसे चाहता हूं। विशेष रूप से निम्नलिखित भी संभालती है:

• पहली बार अदृश्य और जावास्क्रिप्ट में दिखाई देने वाले सेटिंग द्वारा पृष्ठ लोड पर "उछलने" से बचना
• ब्राउज़र के साथ व्यवहार सुंदर ढंग से आकार देता है
• यदि ब्राउज़र छोटा हो जाता है और पाद पृष्ठ से बड़ा हो जाता है, तो इसके अतिरिक्त पृष्ठ को वापस सेट करना
• ऊँचाई समारोह tweaks

यहाँ उन tweaks के साथ मेरे लिए क्या काम किया है:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

सीएसएस:

#footer {
    padding-bottom: 30px;
}

जावास्क्रिप्ट:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

Answer 10

इसने मेरे लिए पूरी तरह से काम किया।

अपने पाद लेख में इस वर्ग के नव-स्थिर-तल को जोड़ें।

<div class="footer navbar-fixed-bottom">

मैंने इसे इस तरह इस्तेमाल किया:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

और यह पूरी चौड़ाई में नीचे की ओर सेट है।

संपादित करें: यह हमेशा दिखाई देने वाले पाद को सेट करेगा, यह कुछ ऐसा है जिसे आपको ध्यान में रखना चाहिए।

Answer 11

.container-fluidकाम करने के लिए आपको अपने दिव्य पाद को लपेटने की आवश्यकता है , आप अपनी .wrapperकक्षा में कुछ गुणों को याद नहीं कर रहे हैं । इसे इस्तेमाल करे:

padding-top:70pxअपने bodyटैग से निकालें और इसे अपने .container-fluidबजाय इसमें शामिल करें , जैसे:

.wrapper > .container-fluid {
    padding-top: 70px;
}

हमें ऐसा इसलिए करना है क्योंकि bodyनेवबार को एडजस्ट करने के लिए नीचे की ओर धकेलने से फुटर को थोड़ा आगे (70px आगे) व्यूपोर्ट से आगे बढ़ाया जाता है जिससे हमें स्क्रॉलबार मिलता है। हमें .container-fluidइसके बजाय डिव को आगे बढ़ाने के बेहतर परिणाम मिलते हैं ।

आगे हमें .wrapperआपकी .container-fluiddiv के बाहर की क्लास को हटाना है और अपनी #maindiv को इसके साथ लपेटना है, जैसे:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>  

निश्चित रूप से आपके पाद का .wrapperdiv से बाहर होना आवश्यक है, इसलिए इसे .wpper div से निकालें और इसे बाहर रखें, जैसे:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

सभी किए जाने के बाद, .wrapperएक नकारात्मक मार्जिन का उपयोग करके अपने पाद को अपनी कक्षा के करीब ठीक से धक्का दें , जैसे:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

और यह काम करना चाहिए, हालांकि आप शायद स्क्रीन को आकार देने के बाद इसे काम करने के लिए कुछ अन्य चीजों को संशोधित करने जा रहे हैं, जैसे .wrapperकक्षा पर ऊँचाई रीसेट करना , जैसे:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

Answer 12

ट्विटर बूटस्ट्रैप और नए नौसिखिया-फिक्स्ड-क्लास वर्ग के साथ ऐसा करने का यह सही तरीका है: (आपको पता नहीं है कि मैंने इसे ढूंढने में कितना समय लगाया)

सीएसएस:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer 13

बूटस्ट्रैप 4 में निर्मित फ्लेक्स उपयोगिताओं का उपयोग करें! यहाँ मैं ज्यादातर बूटस्ट्रैप 4 उपयोगिताओं का उपयोग करके आया हूं।

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

• .d-flex मुख्य div एक फ्लेक्स कंटेनर बनाने के लिए
• .flex-column एक स्तंभ में अपने फ्लेक्स आइटम की व्यवस्था करने के लिए मुख्य div पर
• min-height: 100vh मुख्य div, एक शैली विशेषता या अपने CSS में, व्यूपोर्ट को लंबवत भरने के लिए
• .flex-grow-1 कंटेनर में, मुख्य कंटेंट कंटेनर में तत्व है जो व्यूपोर्ट ऊंचाई में रहता है।

Comments

के बजाय बूटस्ट्रैप से वर्ग के लिए इस्तेमाल किया जा सकता है। min-height: 100vhmin-vh-100

— इकोनुक

इस समाधान ने

— TGR

Answer 14

नावबार घटक का प्रयोग करें और .navbar-fixed-bottom वर्ग जोड़ें:

<div class="navbar navbar-fixed-bottom"></div>

शरीर जोड़ें

  { padding-bottom: 70px; }

Answer 15

चौड़ाई को संभालने के लिए बाधाएँ निम्नलिखित का उपयोग करती हैं ताकि आपको गोल कोने न मिलें, और ताकि आपकी नौसेना पट्टी अनुप्रयोग के किनारों पर प्रवाहित हो जाए

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

फिर आप ऊंचाई, फ़ॉन्ट और रंग को समायोजित करने के लिए बूटस्ट्रैप कक्षाओं को ओवरराइड करने के लिए सीएसएस का उपयोग कर सकते हैं

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

Answer 16

इसे संभालने के लिए आप jQuery का उपयोग कर सकते हैं:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

Answer 17

केवल एक ही है जो मेरे लिए काम करता है! "

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

Answer 18

सबसे सरल तकनीक संभवतः navbar-static-bottomमुख्य कंटेनर डिव के साथ संयोजन में बूटस्ट्रैप height: 100vh(नए CSS3 व्यू पोर्ट प्रतिशत ) का उपयोग करना है। यह पाद को नीचे की ओर प्रवाहित करेगा।

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

Answer 19

के साथ परीक्षण किया गया Bootstrap 3.6.6।

एचटीएमएल

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

सीएसएस

.footer {
  bottom: 0;
  position: absolute;
}

Answer 20

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

पाद की ऊँचाई लपेट तत्व के नीचे इंडेंट के आकार से मेल खाती है।

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

Answer 21

फ्लेक्सबॉक्स का उपयोग करके बूटस्ट्रैप (लेखन के समय 4.3) के नवीनतम संस्करण के लिए यहां एक समाधान है।

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

सीएसएस:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

और एक कोडपेन उदाहरण: https://codepen.io/tillytoby/pen/QPdomR

Answer 22

प्रति बूटस्ट्रैप 4.3 उदाहरण , मामले में आप अपने विवेक खो रहे हैं की तरह मैंने किया था, यह वास्तव में कैसे काम करता है:

• पाद लेख div के सभी माता-पिता के लिए height: 100%( h-100वर्ग) की आवश्यकता है
• पाद के प्रत्यक्ष माता-पिता को display: flex( d-flexवर्ग) की आवश्यकता होती है
• पाद के पास margin-top: auto( mt-autoवर्ग) होना आवश्यक है

समस्या यह है कि आधुनिक फ्रंट-एंड फ्रेमवर्क में हमारे पास अक्सर इन तत्वों के अतिरिक्त आवरण होते हैं।

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

इसलिए, इसे काम करने के लिए, मुझे इन रैपर तत्वों में कक्षाएं जोड़ना पड़ा: एक अतिरिक्त h-100, d-flexएक स्तर को नीचे ले जाना, और mt-autoएक स्तर को पाद से ऊपर ले जाना (इसलिए वास्तव में यह पाद लेख वर्ग पर नहीं है, लेकिन मेरे <app-footer>रिवाज पर तत्व)।

Comments

मैं डाल करने के लिए किया था class="h-100"के लिए <html>टैग भी।

— केल सोलर

Answer 23

यह काम करता है बूटस्ट्रैप में कोड के इस टुकड़े का उपयोग करें

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

Answer 24

बूटस्ट्रैप v4 + समाधान

यहां एक ऐसा समाधान दिया गया है जिसमें HTML संरचना या किसी अतिरिक्त CSS चालन को पुनर्व्यवस्थित करने की आवश्यकता नहीं है:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

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

यह क्यों काम करता है

• style="height:100%;" इसे बनाएं <html> टैग दस्तावेज़ के पूरे अंतरिक्ष ले।
• वर्ग हमारे लिए d-flexसेट करता display:flexहै<body> टैग पर ।
• वर्ग हमारे टैग पर flex-columnसेट flex-direction:columnहोता है <body>। इसका बच्चों ( <header>, <main>,<footer> और किसी भी अन्य प्रत्यक्ष बच्चे) अब खड़ी गठबंधन कर रहे हैं।
• कक्षा हमारे टैग पर h-100सेट height:100%होती है <body>, जिसका अर्थ है कि यह पूरी स्क्रीन को लंबवत रूप से कवर करेगी।
• क्लास flex-grow-1सेट flex-grow:1हमारे लिए <main>, प्रभावी रूप से किसी भी शेष ऊर्ध्वाधर स्थान को भरने के लिए निर्देश देता है, इस प्रकार हमारे <body>टैग पर पहले सेट की गई 100% ऊर्ध्वाधर ऊंचाई की मात्रा ।

यहां कार्यशील डेमो: https://codepen.io/maxencemaire/pen/VwvyRQB

फ्लेक्सबॉक्स पर अधिक जानकारी के लिए https://css-tricks.com/snippets/css/a-guide-to-flexbox/ देखें ।

Comments

h-100वर्ग ठीक से काम नहीं करता है, इसका उपयोग करना बेहतर है min-vh-100।

— इकोनुक

@ikonuk वास्तव में आप "ठीक से काम नहीं करता है" से क्या मतलब है? कृपया विस्तार से बताएं।

— कथानक

क्योंकि h-100कक्षा हमेशा मूल तत्वों की ऊँचाई पर निर्भर करती है और कुछ मामलों पर ठीक से काम नहीं कर सकती है। चूँकि हम व्यूपोर्ट के निचले भाग में पाद चाहते हैं, यह व्यूपोर्ट ऊँचाई का उपयोग करने के लिए एक अच्छा अभ्यास होगा।

— २१:०१ पर आयनोक

फिर से, 'कुछ मामलों को परिभाषित करें'। मूल निर्भरता के बारे में आपका तर्क बस उसी पर लागू होता है min-width। यही कारण है कि HTMLटैग heightकोड में 100% है। उदाहरण काम करता है और मैं यह नहीं देखता कि यह सीएसएस heightसंपत्ति के लिए क्रॉस-ब्राउज़र समर्थन क्यों नहीं देगा , जो कि आखिरकार बूटस्ट्रैप स्निपेट में बदल जाता है।

— ०१:१४ पर कथन्द्राक्ष

मैंने यह नहीं कहा कि आपका उदाहरण काम नहीं करता है। हर कोई HTMLटैग में शैली का उपयोग नहीं करता है । मेरे मामले में, आपके समाधान से काम नहीं चला क्योंकि मैं HTMLटैग में शैली का उपयोग करना पसंद नहीं करता । और मैं नहीं चाहता कि bodyटैग दूसरे माता-पिता पर निर्भर हो। आप एक ही समय में style="height:100%;"और डाल नहीं है h-100। min-vh-100शरीर में डालने से बस काम और कोड कम होता है।

— इकोनुक

Answer 25

ऐसा लग रहा है कि height:100%'चेन' पर ब्रेक लग रहा है div#main। height:100%इसे जोड़ने की कोशिश करें और यह आपको अपने लक्ष्य के करीब ले जा सकता है।

Answer 26

यहां आपको पृष्ठ के निचले भाग में शीर्ष और फुटर पर नावबार के साथ एचएएमएल ( http://haml.info ) में दृष्टिकोण मिलेगा :

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

Comments

क्या आप अपने उत्तर पर थोड़ा विस्तार कर सकते हैं? कोड-केवल उत्तर आमतौर पर हतोत्साहित किए जाते हैं।

— Qix - मोनासा 20

ठीक है, आप क्या जानना चाहते हैं?

— हन्नेस

मुझे इसे जानने की आवश्यकता नहीं है, लेकिन बाद में इस साइट पर आने वाला कोई व्यक्ति यह नहीं जान सकता है कि आपके उत्तर का कोड क्या करता है।

— Qix - मोनासा

संभवतः मुझे इसे हटा देना चाहिए। मैंने एक नया परिचय लिखा। :)

— हेंस

Answer 27

इसे सरल रखें।

footer {
  bottom: 0;
  position: absolute;
}

तुम भी पाद की ऊंचाई के margin-bottomबराबर पाद जोड़कर पाद की ऊंचाई ऑफसेट करने की आवश्यकता हो सकती है body।

Answer 28

यहाँ css3 का उपयोग करके एक उदाहरण दिया गया है:

सीएसएस:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

बेला

Answer 29

यह बूटस्ट्रैप इसे कैसे करता है:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

बस पृष्ठ स्रोत का उपयोग करें और आपको देखने में सक्षम होना चाहिए। डॉन ' <div id="wrap">एक शीर्ष को भूल जाओ ।

Answer 30

एक और संभव समाधान, बस मीडिया प्रश्नों का उपयोग कर

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}