2010-03-12 21 views
8

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

मेरे एचटीएमएल इस तरह दिखता है:

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

मैं html, body, footer { height:100%; } उपयोग करने की कोशिश, लेकिन वह बहुत अधिक स्थान की आवश्यकता नहीं की तुलना में, अनिवार्य रूप से एक पाद लेख में खाली सामग्री के पूर्ण स्क्रीन लंबाई पैदा करता है।

स्क्रॉल बार जोड़ने के बिना बाकी स्क्रीन को भरने के लिए मैं अपने पाद लेख को कैसे प्राप्त करूं?

अग्रिम धन्यवाद, एक निराश कोडर।

उत्तर

8

मुझे पूरा यकीन है कि ऐसा करने का एकमात्र तरीका पूर्ण शेष हाइट की गणना करके है।

यानी, jQuery

$('#footer').height(($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px"); 

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

$(window).resize(function(){...}); 
+0

हाँ, जावास्क्रिप्ट के बिना अच्छा नहीं किया जा सकता है। – gingerbreadboy

+0

क्या कोई विधि जो दस्तावेज़ के सापेक्ष # सामग्री शीर्ष स्थिति का उपयोग करती है, और फिर दस्तावेज़ ऊंचाई में अंतर की गणना करना थोड़ा क्लीनर होगा? –

0

आप jQuery मार्ग से जाने के लिए नहीं करना चाहते हैं, इस के गरीब आदमी का संस्करण #content दे रहा है एक मिनट ऊंचाई यह सबसे प्रदर्शित करता है में काम कर देगा कि, और/या अपने पाद लेख बहुत देकर नीचे पैडिंग का। यह कुछ मामलों में स्क्रॉलबार को ट्रिगर कर सकता है, क्योंकि आप केवल यह नियंत्रित कर रहे हैं कि पेज कितना छोटा हो सकता है।

(या फिर आप सिर्फ माध्यम की एक सीमा के रूप में स्वीकार कर सकते हैं। स्टैक ओवरफ़्लो, उदाहरण के लिए, बस खाली स्थान के ऊपर अपने पाद लेख नाव है, तो पेज बहुत छोटा है।)

8

मैं जानता हूँ कि यह 10 महीने देर हो चुकी है तो आप शायद पहले से ही कुछ पता लगाया। लेकिन यहां एक समाधान है जिसका मैं उपयोग करता हूं।

(क्षमा करें, किसी कारण से मुझे कोड दिखाने के लिए आपको सही काम करने के लिए कोड चीज़ नहीं मिल सकती है।) मूल रूप से "कंटेनर" नामक एक div को लपेटें, या कुछ ऐसा जो कि पाद लेख को छोड़कर अन्य सभी divs के आसपास लपेटें। पाद लेख div कंटेनर div के नीचे कंटेनर के अंदर अन्य सभी के साथ होगा।

अपने शरीर की शैली का पृष्ठभूमि रंग सेट करें ताकि आप अपनी भर को नीचे भरने के लिए चाहते हैं। फिर कंटेनर div का पृष्ठभूमि रंग आपके शरीर की पृष्ठभूमि का रंग होगा। तो पाद लेख के लिए सबकुछ नीचे होगा जो आप पृष्ठभूमि रंग चाहते थे और फिर शरीर पृष्ठभूमि रंग शेष पृष्ठ भरता है।

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