बनाना HTML सामग्री खिड़की

Question

मैं में

• हैडर
• शरीर
• पाद

खड़ी विभाजित एक HTML पृष्ठ है बदले में शरीर

में क्षैतिज बांटा गया है भरने के लिए विस्तारित

• बाईं तरफ एक बड़ा DIV scro से घिरा हुआ llbars, पर सही

शीर्ष लेख और पाद एक चित्र

एक रूप के एक हिस्से को प्रदर्शित निश्चित ऊंचाई रहे हैं। हेडर और पाद लेख द्वारा कब्जा नहीं किया गया खिड़की के हिस्से को भरने के लिए शरीर को लंबवत विस्तार करना चाहिए।

इसी प्रपत्र निश्चित-चौड़ाई है और स्क्रॉल फलक की विंडो चौड़ाई को भरने के लिए क्षैतिज विस्तार करना चाहिए।

चित्र बहुत बड़ी (10x10 screenfuls तक) है, तो मैं इसके बारे में सब नहीं दिखा सकता। इसके बजाय मैं जितना संभव हो उतना प्रदर्शित करना चाहता हूं (पूरी विंडो का उपयोग करके) ताकि उपयोगकर्ता को जितना संभव हो उतना स्क्रॉल करना होगा।

मैं भी जावास्क्रिप्ट का उपयोग नहीं कर सकते, क्योंकि कुछ उपयोगकर्ताओं जरूरी पागल कर रहे हैं और इसे अक्षम करना होगा।

कुछ विकल्प पर विचार किया है मैं:

• और स्क्रॉल फलक सेल की चौड़ाई और ऊंचाई 100% पर सेट के साथ एक मेज अन्य सभी 1%
  काम नहीं करता है। तालिका (और इसलिए पृष्ठ) स्क्रॉल फलक डीआईवी पर पूर्ण स्थिति के साथ भी पूरे आरेख को शामिल करने के लिए विस्तारित है।
• पाद लेख
  की ऊंचाई से पृष्ठ के निचले हिस्से से फलक को ऑफसेट करने के लिए पूर्ण स्थिति, लेकिन काम करता है गलत: पाद लेख की ऊंचाई वर्तमान फ़ॉन्ट आकार पर निर्भर करती है और क्या पाठ लपेटा जाता है। इसका मतलब है कि मुझे यह सुनिश्चित करने के लिए एक बड़ा मार्जिन छोड़ना होगा कि वे ओवरलैप न करें।
• प्लेस एक IFRAME
  सबसे अच्छा समाधान में आरेख मैं अक्षम स्क्रिप्ट के साथ मिल गया है, लेकिन सीमित करता है कि मैं क्या लिपियों में क्या कर सकते हैं जब वे सक्षम हैं।

मुझे लगता है कि Google मानचित्र मानचित्र के लिए एक निश्चित आकार क्षेत्र का उपयोग करता है जब स्क्रिप्ट अक्षम होते हैं। अगर Google ने इस समस्या को छोड़ दिया है तो इसका मतलब यह है कि यह संभव नहीं है?

Answer 1

ऊंचाई का उपयोग: 100% सीएसएस विशेषता इसे काम करना चाहिए।

आप के लिए यदि Dave Woods 100% Height Layout Using CSS काम करता है देखें।

Answer 2

यह position: absolute; सीएसएस संपत्ति का एक छोटा ज्ञात पहलू है जो आपको वह लेआउट देगा जो आप ढूंढ रहे हैं। आप पूरी तरह से सभी 4 दिशाओं, शीर्ष, दाएं, नीचे और बाएं में एक तत्व को स्थान दे सकते हैं। यह एक बॉक्स ब्राउज़र के रूप में के रूप में तरल पदार्थ हो सकता है और हमेशा इसे के किनारों से एक ही दूरी पर रहने के कंटेनर आपके द्वारा निर्दिष्ट है का मतलब है।

div { 
    position: absolute; 
} 
#main { 
    top: 8em; // 8em 
    left: 0; 
    bottom: 8em; // 8em 
    right: 300px; 
    overflow: auto; 
} 
#header { 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 8em; 
} 
#sidebar { 
    top: 8em; 
    right: 0; 
    bottom: 8em; 
    width: 300px; 
    overflow: auto; 
} 
#footer { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 8em; 
} 

एक उदाहरण के लिए http://www.sanchothefat.com/dev/layouts/cssframes.html की जाँच और फिर स्रोत देख सकते हैं और देखने के लिए कि यह कैसे एक अधिक जटिल उदाहरण में किया है सीएसएस अलग खींचने।

यदि आप इस दृष्टिकोण को लेते हैं तो आपको सभी मुख्य कंटेनर <div> एस को पूरी तरह से स्थापित करना होगा। फ़ॉन्ट का आकार चिंता का विषय है तो ईएमएस का उपयोग करें।

पीएस। आईई 6 में गॉचा है (सदमे!) हालांकि मैंने जो उदाहरण दिया है, वह आईई 6 फॉलबैक है। यद्यपि बस एक निश्चित ऊंचाई ठीक हो जाएगी।