सीएसएस फ़्लोटेड डिव ऊंचाई मुद्दा, कोई आसान समाधान नहीं?

मुझे सीएसएस के साथ कोई समस्या है जिसे मैं हल नहीं कर सकता।सीएसएस फ़्लोटेड डिव ऊंचाई मुद्दा, कोई आसान समाधान नहीं?

मैंने a little diagram बनाया है।

मान लें कि गुलाबी और हरे रंग की बॉक्स की ऊंचाई वहां सामग्री द्वारा निर्धारित की जाती है। गुलाबी बॉक्स कभी-कभी छोटा हो सकता है।

जो मैं करने की कोशिश कर रहा हूं, उसमें छोटे बॉक्स को बाहरी युक्त div के लिए इसकी ऊंचाई तय करनी है, ताकि यह गुलाबी बॉक्स (या इसके विपरीत) के समान ऊंचाई हो।

किसी के पास कोई समाधान है?

गुलाबी और हरे रंग के बक्से पर न्यूनतम ऊंचाई काम नहीं करेगी क्योंकि वे उस ऊंचाई से अधिक हो सकते हैं (कोई आईई 6 समर्थन भी नहीं)।

गुलाबी और हरे रंग के बक्से पर 100% ऊंचाई काम नहीं करेगी क्योंकि बाहरी div की निश्चित ऊंचाई नहीं है।

एक टेबल काम करेगा, लेकिन एक टेबल पर आ जाएगा?

मैं गुलाबी और हरे रंग के बक्से पर नकली पृष्ठभूमि और बाएं-दाएं सीमाओं को बाहरी div की पृष्ठभूमि में डालकर कर सकता था। लेकिन यह गन्दा लगता है।

इस समय मेरे पास एक जेएस समाधान है, लेकिन एक आसान होना चाहिए।

चीयर्स।

स्रोत

2010-02-10 Smickie

नहीं, आप इस के लिए सबसे लोकप्रिय तकनीक (अशुद्ध कॉलम, जावास्क्रिप्ट) सूचीबद्ध किया है http://www.alistapart.com/articles/fauxcolumns/ वहाँ निश्चित सीएसएस में divs के साथ ऐसा करने का कोई तरीका नहीं है अभी तक – davidosomething

आपके उत्तरों के लिए चीयर्स। मैं अपने स्वयं के जेएस/jquery समाधान के साथ जा रहा हूं, सीएसएस के साथ बैकअप के रूप में, लेकिन 100% वांछित रूप प्रदान नहीं कर रहा हूं। इसे समाप्त होने पर मैं इसे पोस्ट कर दूंगा और कुछ भारी उपयोग किया था। – Smickie

इसके लिए the Faux Columns technique का उपयोग करें। असल में, आपको दोनों बक्से वाले मूल तत्व पर दोहराने वाली पृष्ठभूमि छवि का उपयोग करना होगा।

स्रोत

2010-02-10 13:43:26

+1 उत्तर के लिए। गलत कॉलम वैध समाधान है और यदि 8 बिट पीएनजी के रूप में सहेजा जाता है, तो फ़ाइल आमतौर पर लगभग 1 या 2 के आसपास होती है। –

... या इससे भी कम। ज्यादातर मामलों में जहां मैंने इस तकनीक का उपयोग किया, मैं 1px की ऊंचाई के साथ दोहराने वाली पृष्ठभूमि छवियों का उपयोग करने में सक्षम था। स्थिति के आधार पर, फ़ाइल का आकार केवल कुछ सौ बाइट हो सकता है। –

अलावा जावास्क्रिप्ट/jQuery या टेबल से, केवल एक चीज मैं के बारे में सोच सकते हैं एक display: table-cell आधारित समाधान (विवरण here) है - लेकिन यह है कि IE में काम नहीं करेगा या तो, और वहाँ बहुत अंतर का उपयोग कर के लिए नहीं है एक टेबल सीधे, वहाँ है?

मैं कहूंगा कि यह दुर्लभ मामलों में से एक है, जहां चूसने वाले सीएसएस विनिर्देशों और/या कार्यान्वयन के कारण, तालिका के चारों ओर कोई रास्ता नहीं है।

संपादित करें: जैसा कि अन्य उत्तरदाताओं ने इंगित किया है, सीएसएस वर्कअराउंड ("गलत कॉलम") हैं जो ज्यादातर मामलों में काम करेंगे। "सीएसएस टेबल" का उपयोग करना (display: table गुणों का उपयोग करके) मैं अभी तक वैध समाधान नहीं मानता, क्योंकि वे आईई 6 द्वारा समर्थित नहीं हैं, एक ब्राउज़र जो अभी भी काफी बाजार हिस्सेदारी है।

स्रोत

2010-02-10 13:42:40

ओहमॉर्ड्सटेबल :) दरअसल, मुझे अभी भी लगता है कि गलत कॉलम सही जवाब है। टेबल्स * वास्तव में * एक लेआउट तंत्र नहीं हैं। गलत कॉलम के साथ, आप पृष्ठभूमि छवि को हमेशा बंद कर सकते हैं और सीएसएस में लेआउट बदल सकते हैं। तालिकाओं के साथ, आपको लेआउट बदलने के लिए तालिका को संपादित करने की आवश्यकता है। केवल मेरे दो सेंट्स। –

सीएसएस टेबल ** ** एक लेआउट तंत्र हैं और HTML तालिका तत्वों की आवश्यकता नहीं है। एचटीएमएल को संपादित करने की कोई आवश्यकता नहीं है जब सीएसएस टेबल लेआउट के लिए उपयोग किया जाता है तो तब होता है जब किसी अन्य प्रकार का सीएसएस लेआउट उपयोग किया जाता है (यानी आपको किसी भी महत्वपूर्ण बदलाव के लिए कुछ ट्विक करना होगा)। – Quentin

@Doug सच है, लेकिन हमेशा काम नहीं करता है (जब आपको कॉलम की आवश्यकता होती है * शारीरिक रूप से * समान ऊंचाई होती है, उदाहरण के लिए कॉलम के अंदर कुछ स्थिति रखते समय)। गलत कॉलम एक ओ.के. समाधान यदि वे अपनी स्थिति के लिए काम (और अगर वे ओपी की समस्या का समाधान कर रहे हैं मैं पूरी तरह से सामग्री हूँ), लेकिन अभी भी, इस जिनमें से मैं भयानक है कि यह किसी न किसी रूप में नहीं दिया गया है लगता है सीएसएस के एक बड़े पैमाने पर कमी है। –

यह एक ही ऊंचाई कॉलम समस्या के समान है, इस समाधान के लिए blog post देखें।

स्रोत

2010-02-10 13:44:34 Lazarus

खैर, इस लेख को पढ़ना कि शीर्षक में "कोई हैक्स" बल्कि संदिग्ध है। –

क्या इस बारे में:

.green { 
    display:block; 
    float: left; 
    background: green; 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

.outer { 
    position: relative; 
    background: yellow; 
    overflow: auto; 
} 

.pink { 
    left: 250px; 
    background: red; 
    height: 100%; 
    width: 100px; 
    position: absolute; 
}

काम कर दिया जाना चाहिए .. शायद मैं रंग बदल गया है, गुलाबी बॉक्स है साथ बढ़ रही है! ;)

संपादित करें आह ठीक है, मुझे दूसरे बॉक्स पर तैरने से चूक गया। यदि यह उपरोक्त वर्णित है, तो यह गलत है, गलत कॉलम एक अच्छी तकनीक है जो मुझे लगता है।

स्रोत

2010-02-10 13:49:57 xijo

समझौता कैसे करें?

यदि गलत कॉलम आपकी मदद नहीं कर सकते हैं, तो आप टेबल का उपयोग नहीं करना चाहते हैं और आपके पास पहले से ही जावास्क्रिप्ट समाधान है, मैं बस सीएसएस (डिस्प्ले: टेबल, डिस्प्ले: टेबल-सेल) का उपयोग करता हूं और जावास्क्रिप्ट डालता हूं आईई 6 और आईई 7 के लिए सशर्त टिप्पणियां।

जब आप सही होते हैं तो आप जावास्क्रिप्ट को आसानी से निकाल सकते हैं और इसी दौरान, आधुनिक ब्राउज़र को इसे निष्पादित नहीं करना पड़ेगा।

स्रोत

2010-02-10 15:57:13 jeroen

सीएसएस फ़्लोटेड डिव ऊंचाई मुद्दा, कोई आसान समाधान नहीं?

उत्तर

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