2012-03-05 15 views
5

मैंने एक साधारण साइडबार संग्रहित करने का प्रयास किया। सामान्य फ्लोट के साथ दृष्टि से सामग्री और फिर मैंने बराबर ऊंचाई कॉलम के लिए क्लासिक तकनीक का उपयोग किया (margin-bottom: -99999px; padding-bottom: 99999px आदि) लेकिन मुझे यह पसंद नहीं आया और मुझे इसके साथ कुछ और समस्याएं थीं, इसलिए मैंने फ्लेक्स-बॉक्स का उपयोग करने का फैसला किया, मैंने कोशिश की यह कुछ समय पहले निश्चित आकार चौड़ाई के साथ था और यह ठीक काम करता था लेकिन अब मुझे प्रतिशत चौड़ाई है इसलिए ऐसा लगता है कि फ़ायरफ़ॉक्स इसे बिल्कुल पसंद नहीं करता है ...फ़ायरफ़ॉक्स पर प्रतिशत चौड़ाई वाला फ्लेक्सबॉक्स काम नहीं कर रहा

This उदाहरण दिखाता है कि मुझे आम तौर पर काम करने के लिए फ्लेक्स-बॉक्स की अपेक्षा कैसे होती है, और यह सफारी और क्रोम में ठीक था, लेकिन फ़ायरफ़ॉक्स प्रतिशत के हिसाब से चौड़ाई की अनदेखी ... मुझे लगता है कि फ़ायरफ़ॉक्स के it is a known issue पाया लेकिन यह काफी पुराना पुराना है और मैंने सोचा कि वे यह पहले से ही हल किया ...

तो मैं में कुछ different की कोशिश की फ़ायरफ़ॉक्स चाल करने के लिए आदेश, लेकिन अभी भी यह नहीं चाहता था कि मुझे उम्मीद थी क्योंकि सामग्री के आधार पर साइडबार के पृष्ठ से पृष्ठ पर अलग-अलग आकार थे ...

तो मैं तरल लेआउट के साथ फ्लेक्स-बॉक्स पर छोड़कर समाप्त होता हूं और अपनी आवश्यकताओं के अनुरूप कुछ और सरल उपयोग करता हूं। ..

लेकिन अगर किसी को भी किसी भी वैकल्पिक हल के साथ इस मुद्दे को हल करने के लिए मुझे पता है उत्सुक हूँ या अगर हम इस के लिए कतार में हैं mozila द्वारा निर्धारित किया जा करने के लिए ...

धन्यवाद!

+0

गलत कॉलम एक समाधान हो सकता है? http://www.alistapart.com/articles/fauxcolumns/ – fcalderan

+1

यह मार्जिन/पैडिंग -बॉटम -/99 999 पीएक्स के साथ लगभग एक ही हैक है, इसलिए आप एक दृश्य उपस्थिति देते हैं कि स्तंभों की ऊंचाई समान है लेकिन वास्तविकता में वे टी, फ्लेक्सबॉक्स और टेबल सही बराबर ऊंचाई तकनीक नहीं हैं, लेकिन जो मुद्दा मैं वर्णन कर रहा हूं वह बराबर ऊंचाई कॉलम से संबंधित नहीं है, लेकिन तथ्य यह है कि फ्लेक्स बॉक्स में होने पर फ़ायरफ़ॉक्स प्रतिशत चौड़ाई को अनदेखा करता है। – panosru

उत्तर

1

मैं margin-bottom: -99999px; padding-bottom: 99999px काम-आसपास के उपयोग के खिलाफ अत्यधिक सलाह देता हूं। यदि आप तरल लेआउट चाहते हैं (मुझे लगता है कि यह सवाल क्या है?) 14%, 86% विभाजन के साथ, फ्लेक्स के बजाय केवल सादे पुराने सीएसएस का उपयोग करें।

http://jsfiddle.net/97dtV/7/

क्यों पहिया फिर से आविष्कार। यदि आप अपनी साइट डालने का बेहतर तरीका ढूंढ रहे हैं, तो "ग्रिड" दृष्टिकोण आज़माएं।

  • सिमेंटिक ग्रिड (http://semantic.gs/)
  • बूटस्ट्रैप - (http://twitter.github.com/bootstrap/index.html)

यह मानता है कि आप कुछ विशिष्ट कारणों के लिए फ्लेक्स की आवश्यकता नहीं है, यदि आप करते हैं तो इसे अनदेखा करें;)। साथ ही, CSS3 विशिष्ट विशेषताओं का उपयोग करते समय पिछड़े-अनुकूलता पर विचार करें!

+0

-/99 999 पीएक्स दृष्टिकोण के साथ समस्या यह है कि मुझे 'स्थिति: पूर्ण' के साथ साइडबार होना चाहिए और यह कुछ है जिसे मुझे टालने की आवश्यकता है। – panosru

+0

हम्म मेरे पास कुछ ऐसा हो सकता है [http://] [http://jsfiddle.net/97dtV/9/) हालांकि .. ईमानदार होने के लिए मैं वर्तमान में [इस] का उपयोग करता हूं (http://jsfiddle.net/97dtV/11/) दृष्टिकोण और अब तक मैं उससे खुश हूं ... लेकिन आपके उत्तर के लिए धन्यवाद! – panosru

+1

सादा पुराना सीएसएस [अलग हो जाता है] (http://jsfiddle.net/mlms13/97dtV/73/) जैसे ही आपके कॉलम एक ही ऊंचाई नहीं हैं। यही कारण है कि लोग -/99 99 पीएक्स दृष्टिकोण, या फ्लेक्सबॉक्स, या सीएसएस टेबल का उपयोग करते हैं। एक अर्थपूर्ण ग्रिड दृष्टिकोण सबसे अच्छा विकल्प हो सकता है, लेकिन यह एक शर्मनाक फ्लेक्सबॉक्स फ़ायरफ़ॉक्स में इतना टूटा हुआ है। –

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