एकाधिक स्क्रॉलिंग कॉलम को संभालने का सबसे अच्छा तरीका

Question

मैं एक वेब अनुप्रयोग विकसित करने की प्रक्रिया में हूं जिसमें शरीर के ऊपर एक शीर्षलेख के दृश्यमान होते हैं जिसमें परिवर्तनीय-ऊंचाई सामग्री के चार स्तंभ होते हैं। डिज़ाइन देवताओं ने इसे निश्चित ऊंचाई तक कम कर दिया है, मुख्य रूप से क्योंकि प्रत्येक कॉलम संभावित रूप से बहुत लंबा हो सकता है, और इसलिए (डिजाइनर होने के नाते) वे स्वतंत्र स्क्रॉलबार के साथ आईफ़्रेम चाहते हैं।

चार (संभावित) स्क्रॉलबार पर्याप्त खराब हैं, लेकिन यदि समग्र पृष्ठ ऊंचाई ब्राउज़र विंडो से अधिक तय की गई है तो यह पांच के साथ खत्म हो जाएगी! इस तरह के मामले में 'सामान्य' समाधान कुल पृष्ठ ऊंचाई को 700 पिक्सेल की तरह तय करना है ताकि इसे लंबवत रूप से फिट करने का 'सर्वश्रेष्ठ मौका' दिया जा सके, लेकिन मैं इसे विभिन्न कारणों से नहीं करना चाहता हूं। उम्मीद है कि स्पष्ट होगा।

तो मेरा सवाल यह है कि: शरीर के कंटेनर को रखने के लिए सबसे अच्छा तरीका क्या होगा जो उपलब्ध कॉलम को भरने वाले प्रत्येक स्तंभ के साथ उपलब्ध (लंबवत स्थान) भरता है? क्या यह भी व्यावहारिक/संभव है? बोनस प्रश्न: क्या मैं विश्वसनीय रूप से कॉलम के लिए सीएसएस ओवरफ्लो प्रॉपर्टी का उपयोग कर सकता हूं या क्या मुझे ग़लत iframes की आवश्यकता है? मेरे पास बहुत सी सीएसएस अनुभव है, लेकिन प्रतिशत आयामों का उपयोग करने के साथ कोई भी नहीं (विशेष रूप से जब पिक्सेल आयामों के साथ संयुक्त होता है क्योंकि मुझे हेडर की आवश्यकता होगी)। इसके अलावा, यह मानकों के अनुरूप और पीछे की तरफ-आईई 6 के अनुकूल होना चाहिए।

टीआईए।

संपादित करें: मैं प्रति सीएसएस लेआउट समाधान की तलाश नहीं कर रहा हूं, मेरी समस्या यह है कि शरीर की ऊंचाई को ठीक किए बिना, प्रत्येक कंटेनर को अधिकतम कंटेनर और स्क्रोल करने योग्य के भीतर अधिकतम ऊंचाई होने की आवश्यकता को समायोजित करने के तरीके को कैसे समायोजित किया जाए पिक्सल में - जब तक मुझे पूरी तरह से आवश्यकता नहीं है।

Answer 1

मैं बहुत यकीन है कि यह वास्तव में करता है कि तुम क्या जरूरत है कर रहा हूँ: Liquid 4 column layout with fixed height banner and footer

नहीं iframes का, कोई जावा स्क्रिप्ट, और प्रत्येक स्तंभ स्वचालित रूप से उपलब्ध ऊंचाई भरता है।

Answer 2

क्या आप इस तरह कुछ बात कर रहे हैं?

<div id="head"></div> 
<div id="body"> 
    <div id="col1"></div> 
    <div id="col2"></div> 
    <div id="col3"></div> 
    <div id="col4"></div> 
</div> 

सीएसएस

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%; } 
#body div { position: absolute; top:0; bottom:0 ;width: 25% } 

यह IE6 में काम नहीं कर सकता, जिसके लिए आप जावास्क्रिप्ट का उपयोग करना होगा:

window.onResize = function() { 
    // Calculate the height of the body, substract the height of the head and apply to all columns 
} 

Answer 3

अपने दूसरे प्रश्न के उत्तर में, बस ऊंचाई सेट सीएसएस में संपत्ति यह सुनिश्चित करने के लिए कि सामग्री की आवश्यकता के मुकाबले कभी भी बड़ा न हो। आप ओवरफ्लो-वाई का उपयोग कर सकते हैं: किसी तत्व पर स्क्रॉलबार को बल देने के लिए स्क्रॉल (मान्य सीएसएस नहीं बल्कि काम करता है)।

Answer 4

मैं height:100% के लिए एक दूसरे, एक सेट के भीतर नेस्ट DIV तत्वों और अन्य padding:60px के विभिन्न क्रमपरिवर्तन की कोशिश की है और मैं प्रभावी ऊंचाई 100% -60px के लिए आंतरिक एक पाने के लिए एक तरह से बाहर काम नहीं कर सकता। समस्या यह है कि प्रतिशत ऊंचाई height युक्त तत्व की विशेषता का संदर्भ देती है, न कि ऊंचाई शून्य मार्जिन और पैडिंग। आह।

मुझे कहना पड़ेगा काश कि सीएसएस एक

width: 12em - 2px; 
border: 1px solid #FED; /* Total width including border is 12em exactly */ 

या

width: 25% - 1em; 
margin: 1.25em 1em; 

में के रूप में प्रतिशत, font-रिश्तेदार, और पिक्सेल इकाइयों (की राशि के रूप में ऊंचाइयों (या अंतर) व्यक्त करने की अनुमति

और इसी तरह, टीएक्स की तरह इसकी फाइल इकाइयों के साथ)।

मुझे लगता है कि आपकी सबसे अच्छी शर्त शायद कुछ जावास्क्रिप्ट है जो बैनर की ऊंचाई की जांच करती है और इसे व्यूपोर्ट की ऊंचाई से घटा देती है, फिर कॉलम को उचित रूप से बॉक्स की ऊंचाई सेट करती है।फिर आप डिज़ाइनर ब्लॉक्स का उपयोग करने वाली स्क्रीन आकार का पता लगाएंगे और सीएसएस फ़ाइल में हार्ड-वायर्ड डिफ़ॉल्ट मान को अपने डिस्प्ले के अनुरूप सेट करेंगे।