पृष्ठ या सामग्री के नीचे पाद, जो भी कम हो

Question 1

मेरे पास निम्नलिखित संरचना है:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

मैं <article>जावास्क्रिप्ट का उपयोग करके सामग्री को गतिशील रूप से लोड करता हूं । इस वजह से, <article>ब्लॉक की ऊंचाई बदल सकती है।

मैं चाहता हूं कि <footer>बहुत अधिक सामग्री होने पर ब्लॉक पृष्ठ के निचले भाग में हो, या ब्राउज़र विंडो के निचले भाग में तब हो जब सामग्री की कुछ ही पंक्तियां मौजूद हों।

फिलहाल मैं एक या दूसरे कर सकता हूं ... लेकिन दोनों नहीं।

तो क्या किसी को पता है कि मैं यह कैसे कर सकता हूं - <footer>पृष्ठ / सामग्री या स्क्रीन के निचले हिस्से के नीचे से चिपके रहने के लिए, जिसके आधार पर यह कम है।

Question 2

रयान फ़ेट का चिपचिपा पाद बहुत अच्छा है, हालाँकि मुझे इसकी कमी * की मूल संरचना लगती है।

फ्लेक्सबॉक्स संस्करण

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

फ्लेक्सबॉक्स के साथ नीचे चिपके रहने के लिए पाद प्राप्त करने की चाल एक ही कंटेनर फ्लेक्स में अन्य तत्वों को लंबवत रूप से रखना है। सभी इसे लेता है एक पूर्ण-ऊंचाई वाले रैपर तत्व display: flexऔर कम से कम एक सहोदर flexसे अधिक मूल्य वाला 0:

_{सीएसएस:}

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

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

कोड स्निपेट दिखाएं

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

स्निपेट का विस्तार करें

यदि आप flexbox का उपयोग नहीं कर सकते हैं, तो मेरी पसंद का आधार संरचना है:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

जो सब से दूर नहीं है:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

पाद को छड़ी करने के लिए छल करने के लिए पाद को अपने युक्त तत्व के निचले पैडिंग के लिए लंगर डालना है। इसके लिए आवश्यक है कि पाद की ऊंचाई स्थिर हो, लेकिन मैंने पाया है कि पाद आमतौर पर स्थिर ऊँचाई के होते हैं।

_HTML:

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_{सीएसएस:}

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

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

कोड स्निपेट दिखाएं

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

स्निपेट का विस्तार करें

पाद लेख के साथ #main-wrapper, आपको अब #main-wrapperपृष्ठ की कम से कम ऊंचाई चाहिए, जब तक कि उसके बच्चे लंबे न हों। यह बनाने के द्वारा किया जाता #main-wrapperएक है min-heightकी 100%। आपको यह भी याद रखना होगा कि इसके माता-पिता, htmlऔर bodyपेज के समान ही लंबा होना चाहिए।

_{सीएसएस:}

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

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

कोड स्निपेट दिखाएं

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

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

स्निपेट का विस्तार करें

बेशक, आपको मेरे फैसले पर सवाल उठाना चाहिए, क्योंकि यह कोड पृष्ठ के नीचे से पाद लेख को नीचे गिराने के लिए मजबूर कर रहा है, तब भी जब कोई सामग्री हो। पिछले चाल द्वारा प्रयोग किया जाता बॉक्स मॉडल बदलने के लिए है #main-wrapper, इसलिए है कि min-heightके 100%शामिल 100pxगद्दी।

_{सीएसएस:}

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

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

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

कोड स्निपेट दिखाएं

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

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

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

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

स्निपेट का विस्तार करें

और वहां आपके पास, आपके मूल HTML संरचना के साथ एक चिपचिपा पाद है। बस ऐसे ही यह सुनिश्चित कर लें footerकी heightके बराबर है #main-wrappers ' padding-bottom, और आप सेट होना चाहिए।

^{* इसका कारण मुझे फेट की संरचना में दोष लगता है क्योंकि यह अनावश्यक तत्व को जोड़ते समय विभिन्न पदानुक्रमित स्तरों पर तत्वों .footerऔर .headerतत्वों को सेट करता है .push।}

Question 3

रेयान फ़ेट का चिपचिपा पाद एक सरल उपाय है जिसका उपयोग मैंने अतीत में कई बार किया है।

मूल HTML :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

इसका अनुवाद करना आपके लिए इन पंक्तियों के साथ पहले से ही परिणाम के समान है:

HTML :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

सीएसएस:

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

बस अपने पाद की ऊंचाई और धक्का div मैच के लिए रैपर मार्जिन पर नकारात्मक अद्यतन करने के लिए मत भूलना। सौभाग्य!

Question 4

मैं बिना किसी अतिरिक्त मार्कअप को जोड़े इस समस्या को हल करना चाह रहा था, इसलिए मैंने निम्नलिखित समाधान का उपयोग किया:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

स्निपेट का विस्तार करें

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

आप इसे और अन्य समाधान यहां ऊपर पोस्ट कर सकते हैं: https://css-tricks.com/couple-takes-sticky-booter/