2011-10-07 12 views
8

मेरे पास कोई कंटेनर नहीं है, कोई रैपर नहीं है।फूटर को मजबूर करना नीचे की ओर रहें?

मैं बस इतना की तरह एक लेआउट है ...

<body> 

<div id="header"> 
</div> 

<div id="left"> 
</div> 

<div id="right"> 
</div> 

<div class="clear"></div> 

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

मुझे क्या करना चाहते हूँ यकीन है कि पाद लेख हमेशा स्क्रीन के तल पर रहता है कि क्या मुझे वह सामग्री बहुत दूर नीचे चला जाता है है बनाने के लिए है और यहां तक ​​कि स्क्रीन के नीचे तक जाने के लिए पर्याप्त सामग्री भी नहीं है।

अभी तक, मैं काम करने के लिए ऊपर सूचीबद्ध दो तरीकों को प्राप्त कर सकता हूं, लेकिन मैं दोनों काम करना चाहता हूं।

यहां सीएसएस है जिसके लिए मैंने सेट अप किया है।

html { 
height: 100%; 
} 

body { 
height: 100%; 
position: relative; 
} 

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

मुझे पता है कि अगर मैं न्यूनतम ऊंचाई लागू करता हूं: 100%; सीएसएस दस्तावेज़ के भीतर एचटीएमएल एलिमेंट के लिए जो सामग्री के रूप में जाएगा, लेकिन अगर मेरे पास कोई सामग्री नहीं है, तो यह स्क्रीन के निचले हिस्से में नहीं टिकेगी। संकल्प परवाह किए बिना।

मैं इस समस्या में कई बार भाग गया हूं, और कभी भी यह सुनिश्चित नहीं कर रहा हूं कि इसे कैसे समझें। इसलिए, कुछ स्पष्टीकरण के साथ, कुछ मदद की सराहना की जाएगी।

आपकी मदद के लिए बहुत बहुत धन्यवाद!

+1

'लेकिन अगर मैं किसी भी सामग्री नहीं है, se' प्रति लेकिन अंत में आप सामग्री होना चाहिए तो इससे कोई फर्क नहीं पड़ता। असल में कोई भी आपके पाद लेख को सामग्री के ठीक नीचे बनाम नीचे फंसने की परवाह नहीं करता है। मुझे नहीं लगता कि लोग इतने बेकार प्रभाव को प्राप्त करने की कोशिश कर रहे इतने समय बर्बाद क्यों करते हैं। – animuson

+1

@animuson: मुझे परवाह है कि यह नीचे पर अटक गया है। मेरे डिजाइन के साथ नीचे फूटर फंसने के बिना यह हास्यास्पद लगेगा। हालांकि आपके इनपुट के लिए धन्यवाद। :) –

+0

संभावित डुप्लिकेट [पेज नीचे नीचे एक फ़ूटर कैसे तय करें] (http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom) –

उत्तर

8

उपयोग इस दोस्त, यह एक बहुत अच्छी तरह से समझाया और पालन करने के लिए आसान ट्यूटोरियल है :

अंतर

Goog ले "चिपचिपा पाद लेख", मैंने नीचे सूचीबद्ध किया है कि यह तकनीक इस खोज के शीर्ष परिणामों से बेहतर क्यों काम करती है।

http://ryanfait.com/sticky-footer/ - यह तकनीक समान है, लेकिन cleanStickyFooter इसे और अधिक लेता है। पर स्थित तकनीक अच्छी तरह से नहीं खेलती है जब आप अपने पाद लेख को 100% की चौड़ाई बनाना चाहते हैं।

http://www.cssstickyfooter.com/ - यह तकनीक कई I में से एक है, जब मैं सीएसएस समाशोधन हैक्स के साथ इसके आक्रामक कहता हूं।

0

क्या आप चाहते हैं कि सामग्री के नीचे जो भी सामग्री की मात्रा हो, या स्क्रीन के निचले हिस्से में जो भी सामग्री की मात्रा हो, फूटर को संलग्न किया जाए?

यदि पहले, स्थिति को परेशान न करें - इसे सामग्री के बाद पृष्ठ प्रवाह के साथ जाने दें।

दूसरे हैं, तो स्थिति का उपयोग करें: तय

आप थोड़ा और स्पष्ट होना पड़ सकता है। क्या स्क्रॉल? हेडर? बाएं? सही? पाद? क्या आपकी समग्र सामग्री का बायां और दायां हिस्सा है? आपके शरीर को रिश्तेदार क्यों रखा जाता है? आपके पास "ऊंचाई: 100% क्यों है;" एचटीएमएल के लिए?

http://code.google.com/p/cleanstickyfooter/

बेस्ट चिपचिपा पाद लेख कभी साइट से वास्तव में बहुत अच्छी तरह से

उद्धरण काम करता है (और मैं पूरी तरह से सहमत हैं):

+0

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

0

आप this Artice by RyanFait

क्रॉस ब्राउज़र में निर्दिष्ट लेआउट पर एक नज़र ले जा सकते हैं, और हमेशा काम करता है :)

+0

उपरोक्त Google से ... http://ryanfait.com/sticky-footer/ - यह तकनीक समान है, लेकिन CleanStickyFooter इसे और अधिक लेता है। यहां स्थित तकनीक अच्छी तरह से नहीं खेलती है जब आप अपने पाद लेख को 100% की चौड़ाई बनाना चाहते हैं। –

संबंधित मुद्दे