पृष्ठ के पाद लेख ("पाद लेख") को विंडो की निचली सीमा से कैसे चिपकाया जाए - यह साइट पृष्ठों के लेआउट में शायद सबसे आम समस्या है। बेशक, समाधान हैं, और उनमें से कई हैं। नीचे यह सुनिश्चित करने का एक तरीका है कि सामग्री की मात्रा और ब्राउज़र के प्रकार की परवाह किए बिना, पाद लेख हमेशा पृष्ठ के नीचे दबाया जाता है।
यह आवश्यक है
CSS और HTML का बुनियादी ज्ञान
अनुदेश
चरण 1
आइए एक उदाहरण के रूप में अधिक विशिष्ट पेजिनेशन योजनाओं में से एक लें - इसमें एक अटारी (हेडर), मुख्य ब्लॉक और पाद लेख होगा। बेशक, यदि आवश्यक हो, तो आप मुख्य ब्लॉक में कई कॉलम रख सकते हैं, लेकिन हम यहां ऐसा नहीं करेंगे, हम केवल पाद लेख की स्थिति पर ध्यान केंद्रित नहीं करेंगे। पृष्ठ का HTML कोड विनिर्देश की घोषणा के साथ शुरू होगा:
टैग के बीच और, पृष्ठ शीर्षक के अलावा, हम एन्कोडिंग का एक संकेत देंगे: साथ ही एक बाहरी सीएसएस फ़ाइल के लिए एक लिंक जिसमें शैलियों का विवरण होगा: @import "styles.css"; हम जगह नहीं देंगे नौवें संस्करण के ओपेरा ब्राउज़र के साथ जटिलताओं से बचने के लिए सीधे पेज के एचटीएमएल-कोड में शैलियों का विवरण। टैग के बीच और पेज की ब्लॉक संरचना को रखें। पहला, निश्चित रूप से, शीर्षक ब्लॉक है। इस विशेष ब्लॉक के लिए शैलियों को सेट करने में सक्षम होने के लिए हम इसे हेडर आइडेंटिफ़ायर देंगे:
यह हेडर हमेशा विंडो में सबसे ऊपर होता है।
फिर - पृष्ठ का मुख्य खंड। इसमें दो नेस्टेड होंगे - बाहरी (पहचानकर्ता - बाहरी) और आंतरिक (पहचानकर्ता - बाहरी आवरण):
यह मुख्य भाग है।
और अंत में, पाद लेख:
यह पाद लेख है - हमेशा खिड़की के नीचे!
पूरा पेज इस तरह दिखेगा:
पाद लेख को कैसे दबाएं?
@import "styles.css";
यह हेडर हमेशा विंडो में सबसे ऊपर होता है।
यह मुख्य भाग है।
यह पाद लेख है - हमेशा खिड़की के नीचे!
चरण दो
अब स्टाइलशीट की सामग्री पर चलते हैं। यह निम्नलिखित योजना को लागू करता है: मुख्य पृष्ठ ब्लॉक को 100% ऊंचाई पर सेट किया जाएगा, शीर्षक पूरी तरह से स्थित होगा, और पाद लेख अपेक्षाकृत होगा। शीर्षक को पृष्ठ की मुख्य सामग्री को ओवरलैप करने से रोकने के लिए, इस मुख्य सामग्री को मुख्य बॉक्स के भीतर एक अतिरिक्त बॉक्स में रखा गया है, और यह अतिरिक्त बॉक्स शीर्षक बॉक्स की ऊंचाई के बराबर शीर्ष मार्जिन पर सेट है। और पाद लेख को उसकी ऊंचाई के बराबर एक ऋणात्मक शीर्ष मार्जिन दिया जाता है - इस तरह इसे खिड़की के निचले किनारे से ऊपर की पूरी ऊंचाई तक उठाया जाएगा। सीएसएस फ़ाइल की पूरी सामग्री: * {मार्जिन: 0; पैडिंग: 0}
html, शरीर {ऊंचाई: १००%;} शरीर {
रंग काला;
स्थिति: रिश्तेदार;
}
#बाहरी {
न्यूनतम ऊंचाई: 100%;
मार्जिन: 0;
पृष्ठभूमि: सफेद;
रंग काला;
} * html #बाहरी {ऊंचाई: १००%;}
#हेडर {
स्थिति: निरपेक्ष;
शीर्ष: 0;
बाएं: 0;
चौड़ाई: 100%;
ऊंचाई: 70 पीएक्स;
पृष्ठभूमि: # 304a00;
बहुत ज्यादा गोपनीय;
सफ़ेद रंग;
पाठ-संरेखण: केंद्र;
} #फुटर {
स्थिति: रिश्तेदार;
मार्जिन-टॉप: -50px;
दोनों को साफ करो;
चौड़ाई: 100%;
ऊंचाई: 50 पीएक्स;
पृष्ठभूमि-रंग: # 304a00;
सफ़ेद रंग;
पाठ-संरेखण: केंद्र;
}
बाहरी आवरण {
बाईंओर तैरना;
चौड़ाई: 100%;
पैडिंग-टॉप: 71px;
} इस फ़ाइल को उस नाम से सहेजा जाना चाहिए जिसे हमने पृष्ठ के html-कोड में निर्दिष्ट किया है - Styles.css।
