379

मेरे पास निम्न पृष्ठ था (डेडलिंक:) http://www.workingstorage.com/Sample.htmजिसमें एक पाद है जिसे मैं पृष्ठ के नीचे नहीं बैठा सकता।

मुझे पाद चाहिए

जब पृष्ठ छोटा हो और स्क्रीन भरा हुआ न हो, और खिड़की के नीचे चिपके रहें, और
दस्तावेज़ के अंत में रहें और सामान्य स्क्रीन के रूप में आगे बढ़ें जब सामग्री का एक बड़ा भाग (सामग्री को ओवरलैप करने के बजाय) हो।

सीएसएस विरासत में मिला है और मुझे परेशान करता है; मैं सामग्री पर न्यूनतम ऊँचाई डालने के लिए इसे ठीक से बदल नहीं सकता या पाद लेख को नीचे तक नहीं बना सकता।

css footer

— Caveatrob
स्रोत

16

यह आश्चर्यजनक है कि यह इतनी सामान्य समस्या है। शायद CSS4 में हम "एक बार बार बनाने" और "एक पाद बनाने" के कार्यान्वयन देखेंगे क्योंकि ये बहुत बार प्रयास किए जाते हैं।

— isomorphismes

1

CSS4 कभी नहीं होगा (CSS3 सिर्फ बढ़ेगा)। मुझे लगता है कि इसे लागू करने के साथ तय किया जाएगा flexbox।

— मरिजके लुत्टेक्स

1

इस पर उत्कृष्ट लेख: css-tricks.com/couple-takes-sticky-footer

— फिल

expertuggestion.com/css-snippets/8

— ललित बघेल

345

एक सरल विधि यह भी है कि 100%आपके पृष्ठ की बॉडी min-heightको 100%भी बनाया जाए। यह ठीक काम करता है यदि आपके पाद की ऊंचाई नहीं बदलती है।

पाद को एक नकारात्मक मार्जिन-शीर्ष दें:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

— जॉन विंस्टनले
स्रोत

27

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

— कोस्टा

@ कोस्टा यहां मेरे जवाब की जांच करता है, एक समाधान के लिए जो चर ऊंचाई पाद के साथ काम करता है।

— जोस रुई सैंटोस

गतिशील सामग्री के लिए बस "ऊंचाई" को छोड़ दें और पाद लेख सामग्री के लिए अनुकूल होगा। सभी ब्राउज़र में परीक्षण नहीं किया गया

— m47730

इसके box-sizing: border-box;लिए शरीर को [और #container] की आवश्यकता हो सकती है ।

— konsolebox

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

— एंड्रयू कॉस्टर

164

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

डेमो देखें

Flexbox विधि:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

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

नीचे दी गई यह विधि ::afterछद्म तत्व पर रखकर एक "ट्रिक" का उपयोग करती है body, और इसे फुटर की सटीक ऊंचाई निर्धारित करने के लिए सेट करती है , इसलिए यह उसी स्थान पर कब्जा कर लेगी जहां पाद पाद करता है, इसलिए जब पाद लेख इसके ऊपर absoluteस्थित होता है, ऐसा प्रतीत होता है कि पाद वास्तव में जगह ले रहा है और यह पूर्ण स्थिति के नकारात्मक प्रभावों को समाप्त करता है (उदाहरण के लिए, शरीर की सामग्री पर जा रहा है)

`position:absolute` विधि: (गतिशील पाद ऊंचाई की अनुमति नहीं है)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

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

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

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

टेबल-लेआउट विधि:

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

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}

<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

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

— vsync
स्रोत

सरल और सुरुचिपूर्ण और अधिक महत्वपूर्ण बात यह काम करता है। जब आप डिव के साथ जोड़ना शुरू करते हैं तो अन्य समाधान विफल हो जाते हैं display: table display: table-row display:table-cell। हालाँकि मैंने पाया कि मुझे body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}स्क्रॉल बार से बचने के लिए जोड़ना होगा। आप इसे समायोजित करके पूरा कर सकते हैं, body:after heightलेकिन मैं रेक्स में मेरा अनुमान लगा रहा हूं, ताकि यह समस्यात्मक न हो जाए।

— स्टीव वार्निंग

3

@SteveWaring - धन्यवाद। यह उत्तर अपडेट किया गया क्योंकि यह काफी पुराना था। अब मैं का उपयोग करने के पक्ष में हूँflexbox

— vsync

1

"बुनियादी सामान्य मार्कअप" के तहत सीएसएस में एक छोटी सी त्रुटि थी जिसके कारण यह काम नहीं करता था (लिंक "डेमो" में त्रुटि मौजूद नहीं थी, जो ठीक है)। मैंने इसे ठीक करने की स्वतंत्रता ली।

— १३

3

धन्यवाद! फ्लेक्सबॉक्स समाधान वास्तव में सरल है और कोई हैक या अजीब निश्चित आकार या निश्चित स्थिति का उपयोग नहीं करता है।

— एंड्रयू कोस्टर

1

यह डेमो ही काम करता है! शानदार, धन्यवाद!

— अपराह्न

51

एक बहुत ही सरल दृष्टिकोण जो महान क्रॉस ब्राउज़र का काम करता है वह है:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

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

— तमसे पाप
स्रोत

33

मैंने इसका उपयोग अपने पाद लेख को नीचे से चिपकाने के लिए किया है और इसने मेरे लिए काम किया है:

एचटीएमएल

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

यह केवल एक संशोधन है जो आपको HTML में करना है, divउसे "allButFooter"कक्षा के साथ जोड़ें । मैंने इसे सभी पृष्ठों के साथ किया था, जो कि इतने कम थे, मुझे पता था कि पाद नीचे तक नहीं टिकेगा, और साथ ही साथ पृष्ठों को भी लंबे समय तक जो मुझे पहले से ही पता था कि मुझे स्क्रॉल करना है। मैंने ऐसा किया, इसलिए मैं देख सकता था कि यह इस मामले में ठीक काम करता है कि पृष्ठ की सामग्री गतिशील है।

सीएसएस

.allButFooter {
    min-height: calc(100vh - 40px);
}

"allButFooter"वर्ग एक है min-heightमूल्य (कि व्यूपोर्ट की ऊंचाई पर निर्भर करता है 100vhमैं पहले से ही पता था कि था व्यूपोर्ट ऊंचाई की 100% का मतलब है) और पाद की ऊंचाई, 40px।

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

उत्तरदायी डिजाइन के साथ काम करना

यहाँ कुछ मैं स्पष्ट करना चाहूंगा। यह वही पाद वाला, जो 40px उच्च था, के साथ काम नहीं किया, जैसा कि मुझे उम्मीद थी कि जब मैं एक उत्तरदायी डिजाइन का उपयोग कर काम कर रहा था Twitter-Bootstrap। मुझे उस फ़ंक्शन को संशोधित करना था जिसे मैं फ़ंक्शन में बदल रहा था:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

ऐसा शायद इसलिए है Twitter-Bootstrap है अपने स्वयं के मार्जिन और पैडिंग के साथ आता है, इसलिए मुझे उस मूल्य को समायोजित करना पड़ा।

मुझे आशा है कि यह आप लोगों के लिए कुछ उपयोग का है! कम से कम, यह प्रयास करने का एक सरल समाधान है, और इसमें पूरे दस्तावेज़ में बड़े बदलाव करना शामिल नहीं है।

— एन। लैरीक्स
स्रोत

मैंने इस समस्या के सभी प्रकार के समाधानों के साथ समस्याओं को मारा है। यह समाधान मेरे पृष्ठ के साथ काम करता है जो display: noneधन्यवाद का उपयोग करके शरीर में प्रदर्शित होने वाले भिन्न होता है । यह अच्छा है और सरल भी है।

— स्टीव वॉ

समाधान के कई घंटों के बाद केवल दो ने काम किया। position: fixed; bottom: 0और ये वाला। यह समाधान सबसे अच्छा है क्योंकि पाद नीचे से नहीं चिपकता है, लेकिन स्क्रॉल करने योग्य पृष्ठ के अंत में रहता है।

— Hmerman6006

अपने उत्तर पर निर्माण करने के लिए, आप इसे सेट करके दूसरा तरीका देख सकते हैं .footer {max-height: calc(100vh+40px); position: absolute}। जैसा कि यह भी काम करता है, आपको बस अपने शरीर का आकार पता होना चाहिए।

— हमरन 6006 14

28

IE7 के बाद से आप बस का उपयोग कर सकते हैं

#footer {
    position:fixed;
    bottom:0;
}

समर्थन के लिए caniuse देखें ।

— लियाम
स्रोत

77

मैं पाद लेख के बाहर सामग्री है जब मैं नीचे पाद लेख नहीं चाहता। मैं चाहता हूं कि जब पर्याप्त न हो, तब पाद नीचे की ओर चिपके रहे, और फिर नीचे की ओर विस्तार करें जब एक स्क्रीनफुल से अधिक हो। चिपचिपा फुटर ने इसे हल किया।

— कैवेट्रोब

@Caveatrob: मैंने इस महत्वपूर्ण जानकारी को आपके प्रश्न में संपादित करने की स्वतंत्रता ले ली, बस गलतफहमी से बचने के लिए (भविष्य के पाठकों के लिए, आपने संभवतः इस बीच इसे हल किया है :-))।

— सालेके

15

एक सरल समाधान जो मैं उपयोग करता हूं, IE8 + से काम करता है

न्यूनतम ऊंचाई दें: html पर 100% ताकि यदि सामग्री कम हो तो भी पृष्ठ पूर्ण-पोर्ट की ऊँचाई ले और पृष्ठ के तल पर पाद लेख चिपक जाए। जब सामग्री बढ़ जाती है तो पाद लेख सामग्री के साथ शिफ्ट हो जाता है और नीचे की ओर चिपका रहता है।

JS फिडेल वर्किंग डेमो: http://jsfiddle.net/3L3h64qo/2/

सीएसएस

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

एचटीएमएल

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

— संजीव
स्रोत

यह अच्छा है..लेकिन बस अपडेट करें .pageContentWrapper {पैडिंग-बॉटम: 100px; / * हाइट ऑफ फूटर * /}

— सुबोध शर्मा

बहुत बहुत धन्यवाद। कोणीय 7 पर काम कर रहे

— कार्लोस टोरेस

मैं जब संभव हो तो एक अनावश्यक स्क्रॉल बार नहीं बनाना चाहता।

— Константин Ван

14

फिर भी, एक और सरल समाधान यह एक है:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

चाल display:tableपूरे दस्तावेज़ के लिए और display:table-rowसाथ का उपयोग करना हैheight:0 लिए और पाद लेख के लिए उपयोग करना है।

चूँकि पादलेख एकमात्र शरीर का बच्चा है जिसका प्रदर्शन इस प्रकार है table-row, इसे पृष्ठ के निचले भाग में प्रस्तुत किया गया है।

— जोस रुई सैंटोस
स्रोत

मुझे सीएसएस टेबल से प्यार है, लेकिन वे उस रेखा को मुद्दा बनाते हैं जो बहुत अजीब हैं: stackoverflow.com/questions/24898115/…

— कोस्टा

1

यह समाधान पूरी तरह से काम नहीं करता है - फ़ायरफ़ॉक्स फ़ुटवेयर की ऊँचाई को अनदेखा करता है 0. मैंने इसके बजाय ऊंचाई 1px या 1% का उपयोग किया। एज, IE11, क्रोम और मोबाइल सफारी 0. से खुश हैं

— किटेट

मैं वास्तव में इस समाधान से प्यार करता हूँ। लेकिन जब मैं इस तरह से अपने लेआउट का निर्माण करता हूं, तो बाल तत्वों की ब्राउज़र गणना को मिटा दिया जाता है। मान लें कि हम पृष्ठ के शीर्ष पर एक कंटेनर रखना चाहते हैं और इसे height: 100%तब वास्तव में इसका 100% होना चाहिए जब व्यूपोर्ट अनुपात 1/1 (वर्ग) हो। जब व्यूपोर्ट व्यापक (लैंडस्केप) हो जाता है तो ऊंचाई 100% और यदि संकरा (चित्र) कम होता है तो 100% हो जाता है। तो ऊंचाई खिड़की की चौड़ाई के अनुपात में है। इसे दूसरे रैपर से हल करने की कोशिश की लेकिन यह काम नहीं आया। किसी को एक समाधान या कम से कम एक संकेत मिला ???

— एक्सल

@Axel इस संस्करण में मैंने 100% ऊंचाई के साथ शीर्ष पर एक नीली div को जोड़ा है जो व्यूपोर्ट चौड़ाई की परवाह किए बिना सभी ऊँचाई ( माइनर फ़ूटर की ऊँचाई) पर कब्जा कर लेता है। मुझे लगता है कि आपके पास अन्य सीएसएस गड़बड़ चीजें हो सकती हैं। मेरे मूल jsFiddle के आधार पर अपने मुद्दे का एक छोटा संस्करण बनाने की कोशिश करें

— जोस रुई सैंटोस

@JoseRuiSantos आपकी प्रतिक्रिया के लिए बहुत बहुत धन्यवाद। यह एक फायरफॉक्स बग लगता है। स्क्रीनशॉट देखें

— Axel

7

मोबाइल उपकरणों से सावधान रहने की एक बात है, क्योंकि वे व्यूपोर्ट के विचार को 'असामान्य' तरीके से लागू करते हैं:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

जैसे, —उपयोग करना position: fixed; (जैसा कि मैंने अन्य स्थानों में अनुशंसित देखा है) आमतौर पर जाने का रास्ता नहीं है। बेशक, यह आपके द्वारा किए गए सटीक व्यवहार पर निर्भर करता है।

मैंने जो उपयोग किया है, और डेस्कटॉप और मोबाइल पर अच्छा काम किया है, वह है:

<body>
    <div id="footer"></div>
</body>

साथ में

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

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

— बेन जैक्सन
स्रोत

7

एक बहुत ही सरल फ्लेक्स समाधान जो तत्वों की निश्चित ऊँचाई या बदलती स्थिति को नहीं मानता है।

एचटीएमएल

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

सीएसएस

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

ब्राउज़र का समर्थन

IE11 और नीचे को छोड़कर सभी प्रमुख ब्राउज़र।

उपयुक्त उपसर्गों के लिए ऑटोप्रिफ़नर का उपयोग करना सुनिश्चित करें ।

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

.container {
  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: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

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

— m.spyratos
स्रोत

एक जादू की तरह काम किया! यहां तक कि 4k फुट से अधिक रेस स्टिक तल पर

— अरपन बनर्जी

6

यह करो

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

आप फ्लेक्स के बारे में भी पढ़ सकते हैं यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है

अपडेट : मैंने फ्लेक्स के बारे में पढ़ा और इसे आजमाया। इसने मेरे लिए काम किया। आशा है कि यह आपके लिए भी ऐसा ही करे। यहाँ बताया गया है कि मैंने कैसे लागू किया। मुख्य आईडी नहीं है यह div है

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

main {
    display: block;
    flex: 1 0 auto;
}

यहाँ आप फ्लेक्स https://css-tricks.com/snippets/css/a-guide-to-lexlexbox/ के बारे में अधिक पढ़ सकते हैं

यह ध्यान रखें कि यह IE के पुराने संस्करणों द्वारा समर्थित नहीं है।

— आरथ टंडेल
स्रोत

1

यह अभ्यास में सबसे अच्छा जवाब है। flex-grow: 1पाद के ऊपर कुछ के लिए उपयोग करने से पाद लेख नीचे की ओर ठीक से रहेगा।

— iBug

5

मैंने यहाँ ऐसे ही प्रश्न का उत्तर दिया:

पृष्ठ के निचले भाग पर स्थित पाद लेख निश्चित शीर्षक वाले हैं

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

अपने html और शरीर के लिए ऊँचाई सेट करके प्रारंभ करें

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

मैं columnहमारे ऐप के लिए एक व्यवहार मान रहा हूं , इस मामले में आपको शीर्ष लेख, नायक या किसी भी सामग्री को लंबवत रूप से जोड़ने की आवश्यकता है।

स्पेसर क्लास बनाएं

.spacer {
    flex: 1; 
}

तो बाद में आपके HTML में कुछ ऐसा हो सकता है

<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

आप यहाँ इसके साथ खेल सकते हैं https://codepen.io/anon/pen/xmGZQL

— Camo
स्रोत

5

यह एक चिपचिपा पाद के रूप में जाना जाता है। इसके लिए एक Google खोज बहुत सारे परिणामों के साथ आती है। CSS स्टिकी फूटर वह है जिसका मैंने सफलतापूर्वक उपयोग किया है। लेकिन और भी हैं।

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

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

इस कोड के लिए स्रोत

— पाओलो बर्गेंटिनो
स्रोत

3

मेरी jquery विधि, यह पृष्ठ के निचले भाग में पाद लेख डालता है यदि पृष्ठ सामग्री खिड़की की ऊँचाई से कम है, या केवल सामग्री के बाद पाद लेख रखता है:

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

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

— सैम जोन्स
स्रोत

3

मैं खुद इस समस्या को देख रहा हूं। मैंने काफी कुछ समाधान देखे हैं और उनमें से प्रत्येक में कुछ मुद्दे थे, जिनमें अक्सर कुछ जादू की संख्याएं शामिल थीं।

इसलिए मैं इस समाधान के साथ आए विभिन्न स्रोतों से सर्वोत्तम प्रथाओं का उपयोग कर रहा हूं:

http://jsfiddle.net/vfSM3/248/

जो चीज मैं विशेष रूप से यहां हासिल करना चाहता था, वह यह है कि हरे क्षेत्र के अंदर पाद और हेडर के बीच स्क्रॉल करने के लिए मुख्य सामग्री प्राप्त की जाए।

यहाँ एक सरल सीएसएस है:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

— husayt
स्रोत

3

मुझे इस तरह से डिज़ाइन की गई साइटों से नफरत है। आप एक ही समय में मेरे द्वारा पढ़े जाने वाले पाठ की मात्रा को प्रतिबंधित क्यों करना चाहते हैं? मुझे हर समय शीर्ष लेख और पाद लेख देखने की आवश्यकता नहीं है, मुझे पता है कि जब मैं उन्हें चाहता हूं तो उन्हें कहां खोजना है।

— टरमिल

1

@Tarmil की नज़र numerics.info पर है । क्या अब आप देखते हैं कि यह कब उपयोगी हो सकता है?

— 20

3

यह है कि मैं एक ही मुद्दे को कैसे हल किया

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

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

<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

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

— Nemus
स्रोत

3

footer {
  margin-top:calc(5% + 60px);
}

यह ठीक काम करता है

— Karthikaeyan
स्रोत

2

बस पाद अनुभाग को अनुकूलित करें

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

— rashedcs
स्रोत

काम नहीं कर रहा। यह हमेशा नीचे की ओर रहता है, भले ही हमारे पास बहुत बड़ा पृष्ठ हो। यह सभी पेज के साथ स्क्रॉल नहीं कर सकता है लेकिन बस नीचे से चिपका रहता है।

— fWd82

काम नहीं करता है। पाद लेख सामग्री के ऊपर आ रहा है।

— indolentdeveloper

1

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

तो पहली बात हम करते हैं, सबसे बड़ा कंटेनर (html) 100% है। Html पेज उतना ही बड़ा होता है जितना की पेज। अगला हम शरीर की ऊंचाई निर्धारित करते हैं, यह html टैग के 100% से बड़ा हो सकता है, लेकिन यह कम से कम उतना बड़ा होना चाहिए, इसलिए हम न्यूनतम ऊंचाई 100% का उपयोग करते हैं।

हम शरीर को भी सापेक्ष बनाते हैं। सापेक्ष का मतलब है कि आप अपने मूल स्थान से रिश्तेदार के आसपास ब्लॉक तत्व को स्थानांतरित कर सकते हैं। हम यहाँ हालांकि उस का उपयोग नहीं करते हैं। क्योंकि सापेक्ष का दूसरा उपयोग है। कोई भी पूर्ण तत्व या तो मूल (html) या पहले रिश्तेदार माता-पिता / दादा दादी के लिए निरपेक्ष है। यही हम चाहते हैं, हम पाद को निरपेक्ष चाहते हैं, शरीर के सापेक्ष, अर्थात् नीचे।

अंतिम चरण पाद लेख को पूर्ण और नीचे पर सेट करना है: 0, जो इसे पहले माता-पिता / दादा-दादी के निचले हिस्से में ले जाता है जो सापेक्ष है (शरीर का अंग)।

अब हमें ठीक करने के लिए एक समस्या है, जब हम पूरा पृष्ठ भरते हैं, तो सामग्री पाद लेख के नीचे जाती है। क्यों? ठीक है, क्योंकि पाद लेख अब "html प्रवाह" के अंदर नहीं है, क्योंकि यह निरपेक्ष है। तो हम इसे कैसे ठीक करते हैं? हम शरीर में गद्दी-तल जोड़ेंगे। यह सुनिश्चित करता है कि शरीर वास्तव में सामग्री से बड़ा है।

मुझे उम्मीद है कि मैंने आप लोगों के लिए बहुत कुछ स्पष्ट किया है।

— डेविड
स्रोत

1

JQuery का उपयोग कर गतिशील एक लाइनर

सभी सीएसएस विधियां जो मेरे पास आई हैं वे बहुत कठोर हैं। इसके अलावा, फुटर को सेट करना fixedएक विकल्प नहीं है यदि यह डिजाइन का हिस्सा नहीं है।

पर परीक्षण किया गया:

क्रोम: 60
एफएफ: 54
IE: 11

इस लेआउट को मानते हुए:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

निम्नलिखित jQuery फ़ंक्शन का उपयोग करें:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

वह जो खिड़की की ऊंचाई के min-heightलिए निर्धारित है - पाद की ऊंचाई उस समय क्या हो सकती है।#content

चूंकि हमने उपयोग किया था min-height, अगर #contentऊंचाई खिड़की की ऊंचाई से अधिक है , तो फ़ंक्शन इनायत से नीचा दिखाती है और किसी भी चीज को प्रभावित नहीं करती है क्योंकि इसकी आवश्यकता नहीं है।

इसे कार्रवाई में देखें:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

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

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

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

JsFiddle पर समान स्निपेट

बक्शीश:

हम इसे और आगे ले जा सकते हैं और इस फ़ंक्शन को गतिशील दर्शक ऊंचाई के अनुकूल बना सकते हैं, जैसे:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}

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

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

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

— मुझे ख़तरा है
स्रोत

1

तुम यह केर सकते हो

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

— अब्दुल्ला अब्दुल्लाह
स्रोत

0

बस html, शरीर और दूसरी पंक्तियों को पाद लेख को छोड़कर 100% पर सेट करें। जैसे

<body>
<header></header>
<content></content>
<footer></footer>

सीएसएस बन जाता है

html, body, header, content{
height:100%;
}

— ओलाटुंडे जी।
स्रोत

0

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


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

— सैन जैसी
स्रोत

0

उसका क्या:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>

— novecentonove
स्रोत

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, क्यों और / या इस कोड के उत्तर के बारे में अतिरिक्त संदर्भ प्रदान करने से प्रश्न इसके दीर्घकालिक मूल्य में सुधार करता है।

— at.βοιτ.βε

-1

मैंने अपनी कई परियोजनाओं में उपयोग किया है और कभी भी कोई भी मुद्दा नहीं मिला है :)

आपके संदर्भ के लिए, कोड स्निपेट में है

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

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

— संतोष खलसे
स्रोत

डेमो देखें

Flexbox विधि:

position:absolute विधि: (गतिशील पाद ऊंचाई की अनुमति नहीं है)

टेबल-लेआउट विधि:

सीएसएस

एचटीएमएल

JQuery का उपयोग कर गतिशील एक लाइनर

बक्शीश:

`position:absolute` विधि: (गतिशील पाद ऊंचाई की अनुमति नहीं है)