स्क्रॉलबार होने पर भी हर समय पृष्ठ की सामग्री के निचले भाग पर बने रहें

261

कृपया उस लिंक को देखें, मैं इसके विपरीत चाहता हूं: जब सामग्री स्क्रॉलबार पर ओवरफ्लो हो जाती है, तो मैं चाहता हूं कि मेरा पाद हमेशा पृष्ठ के पूर्ण तल पर हो, जैसे स्टैक ओवरफ्लो।

मेरे साथ एक div है id="footer"और यह CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

लेकिन यह सब करता है व्यूपोर्ट के निचले हिस्से में जाता है, और अगर आप नीचे स्क्रॉल करते हैं तो भी वहां रहता है, इसलिए यह सबसे नीचे नहीं है।

छवि: Examlple

क्षमा करें यदि स्पष्ट नहीं किया गया है, तो मैं नहीं चाहता कि इसे ठीक किया जाए, केवल इसके लिए सभी सामग्री के वास्तविक तल पर होना चाहिए।

— एच बेलमई
स्रोत

1

कोशिश करो position:fixed, हालांकि यह करने का सबसे अच्छा तरीका नहीं होगा

— redDevil

स्थिति की कोशिश करें: शरीर पर सापेक्ष।

1

आपने अपने को बंद नहीं किया; स्थिति के बाद: निरपेक्ष। यह पूरी तरह से अन्यथा काम किया होता!

— एलेक्सहिग्घ

545

यह वही है जो position: fixedइसके लिए डिज़ाइन किया गया था:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

यहाँ की बेला है: http://jsfiddle.net/uw8f9/

— जोसेफ सिलबर
स्रोत

65

90% मामलों के लिए यह समाधान अच्छा नहीं है। यदि आप अपनी खिड़की को फिर से आकार देते हैं, तो आपका पाद अन्य सामग्री को ओवरले करेगा और आपकी सामग्री के अंत में सही नहीं रुकेगा

— vsync

10

@aroth क्योंकि वे दो पूरी तरह से अलग समाधान हैं। यह समाधान हर समय पाद को स्क्रीन के दृश्य क्षेत्र के निचले भाग में रखेगा। वैकल्पिक समाधान पाद को स्क्रीन के नीचे या पृष्ठ के निचले भाग पर रखता है, जिसके आधार पर यह बड़ा होता है - जो कि पूछने वाले ने अनुरोध किया था।

— माई हेड हर्ट्स

6

@MyHeadHurts - आप बिल्कुल सही कह रहे हैं। जवाब देने के बाद, मुझे एहसास हुआ कि यह वही नहीं था जो ओपी चाहता था, लेकिन मैंने इसे एक साधारण फिक्स्ड पाद की तलाश में लोगों के लिए यहां छोड़ दिया। टिप्पणियों (और वोटों) से ऐसा लगता है कि कई लोग इस प्राथमिक सीएसएस सुविधा से जूझ रहे हैं।

— जोसफ सिल्बर

1

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

— अरोथ

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

— माई हेड हर्ट्स

187

दुर्भाग्य से आप ऐसा नहीं कर सकते हैं कि थोड़ा अतिरिक्त HTML जोड़ने और CSS का एक टुकड़ा दूसरे पर निर्भर होने के साथ।

एचटीएमएल

सबसे पहले आप अपने रैप करने के लिए की जरूरत है header, footerऔर #bodyएक में #holderdiv:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

सीएसएस

फिर सेट height: 100%करने के लिए htmlऔर body(वास्तविक शरीर नहीं, बल्कि आपके #bodyसुनिश्चित करने के लिए आप बच्चे तत्वों पर एक प्रतिशत के रूप न्यूनतम ऊंचाई सेट कर सकते हैं div)।

अब div min-height: 100%पर सेट करें #holderताकि यह स्क्रीन की सामग्री को भर दे और div position: absoluteके तल पर पाद को बैठने के लिए उपयोग करें #holder।

दुर्भाग्य से, आपको padding-bottomउस #bodydiv पर आवेदन करना होगा जो कि ऊँचाई के बराबर footerहो ताकि यह सुनिश्चित किया जा सके कि यह footerकिसी भी सामग्री से ऊपर न बैठे:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

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

काम करने का उदाहरण, छोटा शरीर: http://jsfiddle.net/ELUGc/

काम करने का उदाहरण, लंबा शरीर: http://jsfiddle.net/ELUGc/1/

— मेरे सर में दर्द है
स्रोत

मुझे चौड़ाई क्यों नहीं मिल रही: 100%; की आवश्यकता है

— सोमनाथ खरत

4

@sTACKoVERFLOW - यदि आप एक width या दोनों को निर्दिष्ट नहीं करते हैं leftऔर rightतब मान सेट किए जाते हैं autoऔर तत्व आपकी सामग्री को फिट करने के लिए लपेटेगा । निर्दिष्ट करना width: 100% या left: 0 और right:0सुनिश्चित करें कि पूरी तरह से तैनात तत्व कंटेनर तत्व की पूरी चौड़ाई लेता है

— मेरे सिर में दर्द

मैं इसी तरह के व्यवहार की तलाश में था, लेकिन मेरे मामले में # बीओडी फ्लोट है, "फ्लोट: लेफ्ट"। छोटे शरीर का उदाहरण काम करता है, लेकिन लंबे शरीर का उदाहरण नहीं है। किसी भी सुझाव मैं कैसे # बीओटी पर फ्लोट का उपयोग करके वांछित व्यवहार प्राप्त कर सकता हूं।

— जतिन

@ इयान ने कहा, एक जवाब में क्योंकि उसके पास टिप्पणी करने के लिए पर्याप्त प्रतिनिधि नहीं था: यदि आपको 'माई हेड हर्ट्स' के उत्तर के साथ asp.net में समस्या हो रही है - तो आपको मुख्य में 'ऊंचाई: 100%' जोड़ने की आवश्यकता है इस कार्य के लिए FORM टैग के साथ-साथ HTML और BODY टैग तैयार किए गए।

— सुश्री मुंह

यदि आप इसे पूरे शरीर के अंदर एक div के अंदर काम करने के लिए प्राप्त करने की कोशिश कर रहे हैं, तो सुनिश्चित करें कि आप तत्वों सहित अपने सभी तत्वों height=100%पर निर्दिष्ट करें । <form>

— बेन कैइन

13

बस एक और समाधान के लिए काम किया है जैसा कि ऊपर के उदाहरण में मेरे लिए बग (कहीं त्रुटि) है। चयनित उत्तर से भिन्नता।

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

html लेआउट के लिए

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

इस तरह से पुराने ब्राउज़र का समर्थन नहीं करते हैं, लेकिन पुराने ब्राउज़र के लिए स्वीकार्य है कि फूटर को देखने के लिए 30px का स्कोर किया जाए

plunker

— गुमनाम
स्रोत

5

मुझे लगता है कि यह इसका उपयोग 'अन्य उत्तरों के जवाब' के लिए नहीं करने के लिए कहता है, लेकिन दुर्भाग्य से मेरे पास उचित उत्तर पर टिप्पणी जोड़ने के लिए पर्याप्त प्रतिनिधि नहीं है (!) लेकिन ...!

यदि आपको 'माई हेड हर्ट्स' के उत्तर से asp.net में समस्या हो रही है - तो आपको काम करने के लिए मुख्य जनरेट किए गए FORM टैग के साथ-साथ HTML और BODY टैग में 'ऊँचाई: 100%' जोड़ने की आवश्यकता है।

— इयान
स्रोत

4

तुमने अपने को बंद नहीं किया; स्थिति के बाद: निरपेक्ष। अन्यथा आपके उपरोक्त कोड ने पूरी तरह से काम किया होगा!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

— AlexHighHigh
स्रोत

3

मैं टिप्पणी करूंगा कि क्या मैं कर सकता हूं, लेकिन मेरे पास अभी तक कोई अनुमति नहीं है, इसलिए मैं एक उत्तर के रूप में एक संकेत पोस्ट करूंगा, मेरे एंड्रॉइड फोन पर अप्रत्याशित व्यवहार के लिए:

स्थिति: फिक्स्ड केवल मेटा टैग का उपयोग करके एंड्रॉइड 2.1 थ्रू 2.3 में काम करता है:

<meta name="viewport" content="width=device-width, user-scalable=no">.

http://caniuse.com/#search=position देखें

— तारकिसो जूनियर
स्रोत

2

व्यूपोर्ट कमांड का उपयोग करके यह एक सहज समाधान है जो व्यूपोर्ट ऊंचाई की न्यूनतम ऊंचाई को बढ़ाता है और फुटर की ऊंचाई को घटाता है।

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

— Obromios
स्रोत

1

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

— डेविड बी
स्रोत

1

मैं बस जोड़ना चाहता हूं - अन्य जवाबों में से अधिकांश ने मेरे लिए ठीक काम किया; हालाँकि, उन्हें काम करने में काफी समय लगा!

इसका कारण यह है कि height: 100%केवल माता-पिता के तलाक की ऊंचाई तय करना!

तो अगर आपका पूरा html (शरीर के अंदर) निम्नलिखित जैसा दिखता है:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

फिर निम्नलिखित ठीक हो जाएगा:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

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

... "धारक" के रूप में यह सीधे "शरीर" से ऊँचाई उठाएगा।

कुडोस टू माई हेड हर्ट्स, जिसका जवाब मैं काम करने के लिए मिला था!

तथापि। यदि आपका html अधिक नेस्टेड है (क्योंकि यह केवल पूर्ण पृष्ठ का एक तत्व है, या यह एक निश्चित कॉलम के भीतर है, आदि) तो आपको यह सुनिश्चित करने की आवश्यकता है कि प्रत्येक युक्त तत्व भी height: 100%div पर सेट है। अन्यथा, ऊंचाई पर जानकारी "शरीर" और "धारक" के बीच खो जाएगी।

उदाहरण के लिए, जहाँ मैंने यह सुनिश्चित करने के लिए कि मैं अपने हेडर / बॉडी / पाद तत्वों के लिए नीचे की ओर सभी तरह से "फुल हाइट" क्लास जोड़ रहा हूँ।

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

और सीएसएस में पूर्ण-ऊंचाई वर्ग पर ऊंचाई सेट करना याद रखें:

#full-height{
    height: 100%;
}

यह मेरे मुद्दों को तय किया!

— टिम एल
स्रोत

0

यदि आपके पास एक निश्चित ऊंचाई पाद है (उदाहरण के लिए 712px) तो आप इसे इस तरह से js के साथ कर सकते हैं:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

— जॉर्ज कार्लिन
स्रोत

0

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

— प्रवीण कुंडू
स्रोत

कृपया अपने उत्तर में बताएं, समस्या क्या थी, और यह स्निपेट इसे कैसे हल करेगा, दूसरों को इस उत्तर को समझने में मदद करने के लिए

— FZs

-2

फिक्स्ड-बॉटम बूटस्ट्रैप क्लास का उपयोग करें

<div id="footer" class="fixed-bottom w-100">

— गौतम सोयराज
स्रोत

कोई संकेत नहीं है कि ओपी बूटस्ट्रैप का उपयोग कर रहा है।

— टायलरएच