2011-05-29 20 views
6

पृष्ठ की सामग्री बहुत छोटी होती है, भले ही वह स्क्रीन के निचले भाग में हमेशा एक पाद लेख जोड़ सके,एक पाद लेख जोड़ना जो हमेशा स्क्रीन के नीचे प्रदर्शित होता है?

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

अद्यतन

मैं सिर्फ एक पाद लेख स्क्रीन के नीचे स्थित है कि चाहते हैं जब वहाँ नहीं है पर्याप्त सामग्री पूरे स्क्रीन को भरने के लिए (यानी मैं नहीं चाहता कि के बीच में दिखा पाद लेख चाहते हैं स्क्रीन) और फिर यदि पृष्ठ के निचले हिस्से में बस नीचे जाने के लिए पर्याप्त सामग्री है।

यहाँ flexbox संस्करण है:

+1

संभावित डुप्लिकेट सीएसएस?] (http://stackoverflow.com/questions/5516910/how-can-i-force-my-footer-to-stick-to-the-bottom-of-any-page-in-css)। सवाल से ऐसा लगता है कि आप एक [चिपचिपा-फूटर] (http://stackoverflow.com/questions/tagged/css+html+sticky-footer) ढूंढ रहे हैं? –

उत्तर

4

आप एक "चिपचिपा पाद लेख" के बाद कर रहे हैं, इस लेख कुछ तकनीकों का उपयोग कर सकते हैं पता चलता http://codepen.io/chriscoyier/pen/RRbKrL

एचटीएमएल :

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

सीएसएस:

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 
.content { 
    flex: 1; 
} 
12

निम्नलिखित सीएसएस गुण का उपयोग करें:

position: fixed; 
bottom: 0px; 
+4

यह बहुत अच्छा काम करता है, लेकिन मैं नहीं चाहता कि यह चिपचिपा पाद लेख हो, अगर पृष्ठ पर बहुत सारी सामग्री है तो मैं इसे पृष्ठ के नीचे नीचे जाना चाहता हूं। –

+2

@ सेन: '"अगर पृष्ठ पर बहुत सारी सामग्री है तो मैं सिर्फ पेज के निचले भाग में जाना चाहता हूं" 'यह ** बिल्कुल ** ** एक चिपचिपा पाद लेख क्या करता है: http://ryanfait.com/चिपचिपा-पाद लेख/- अधिक सामग्री नहीं: http://jsfiddle.net/KMQxC/ बनाम बहुत सारी सामग्री: http: // jsfiddle।नेट/केएमक्यूएक्ससी/1/संपादित करें: आपके प्रश्न पर टिप्पणी: '' मैं बस स्क्रीन के निचले हिस्से में एक चाहता हूं जब पूरी स्क्रीन भरने के लिए पर्याप्त सामग्री न हो "'- अब मैं वास्तव में उलझन में हूं क्या आप चाहते हैं क्षमा करें अगर मैं आपको यहां समझ नहीं रहा हूं। – thirtydot

+1

@ मेरे खराब होने पर तीसरे, मैंने सोचा कि चिपचिपा पाद लेख हमेशा स्क्रीन के निचले हिस्से में था, न कि पृष्ठ के निचले हिस्से में, मैं उस उदाहरण को आजमाऊंगा जिसे आप लिंक करते हैं, क्षमा करें। –

0

आप एक निश्चित स्थिति तत्व यह है कि पृष्ठ के निचले भाग के लिए बाध्य है का उपयोग करना चाहेंगे।

आप पाद लेख शामिल करने के लिए एक div का उपयोग कहो, तो आप इस तरह कुछ सीएसएस चाहता हूँ:

div#footer{ 
    position: fixed; 
    z-index: 1000000; 
    overflow: hidden; 
    bottom: 0px; 
    left: 0px; 
    height: 100px; 
    width: 600px; 
} 

आप शायद ऊंचाई और चौड़ाई अद्यतन करने के लिए चाहता हूँ जब कोई उपयोगकर्ता प्रपत्र आकार बदलता है। आपको शायद पगेलोड पर चौड़ाई का आकार बदलने की आवश्यकता होगी।

1

यहां एक सीएसएस केवल समाधान है, कोई jQuery आवश्यक नहीं है। आवरण की न्यूनतम ऊंचाई 100% और स्थिति यह अपेक्षाकृत है, तो पूरी तरह से नीचे बाईं ओर पाद लेख की स्थिति बनाओ:

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

#content { 
    padding-bottom:80px; 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

Source

की [मैं कैसे के प्रत्येक पृष्ठ के नीचे करने के लिए छड़ी करने के लिए अपने पाद लेख मजबूर कर सकते हैं
+2

केवल लिंक को लिंक करने की संभावना अधिकतर हटा दी जाएगी, संदर्भ लिंक रखने के लिए इसे अकेले स्टैंड बनाने का प्रयास करें :) – bummi

+0

क्या यह बेहतर है? – Piero