मैं पिछले एक या दो दिनों में बनाए गए एक पृष्ठ को पॉलिश कर रहा हूं और बॉक्स-छाया का उपयोग करने के बाद एक समस्या में भाग गया हूं - मुझे उम्मीद थी कि कोई व्यक्ति कुछ प्रकाश डालेगा इसे ठीक करने का आसान तरीका।बॉक्स-छाया और 100% द्रव चौड़ाई अंक
सेटअप: मेरे पास एक div है जिसमें चौड़ाई, अधिकतम चौड़ाई और बॉक्स-छाया समेत कुछ गुण हैं।
#mydiv {
width:100%;
max-width:1200px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
समस्या: "बॉक्स-छाया" संपत्ति div तत्व की चौड़ाई के 40px जोड़ता - हर तरफ 20px। जब एक स्क्रीन इतनी छोटी होती है कि सामग्री को 100% चौड़ाई विशेषता को हिट करना चाहिए, तो हम एक क्षैतिज स्क्रॉल-बार देखते हैं। सीएसएस के माध्यम से खोदने के बाद मैंने पाया कि यह इसलिए था क्योंकि div तकनीकी रूप से चौड़ाई की तरह कुछ था: 100% + 40 पीएक्स;
मैं क्या कोशिश की है: मैं अतिप्रवाह की स्थापना पर विचार किया है: माता पिता div पर छिपा हुआ है, लेकिन मैं एक न्यूनतम-चौड़ाई सेट है कि तब सामग्री दुर्गम होगा की क्या ज़रूरत है। मैंने बॉक्स-छाया सीएसएस में आकार तर्क के लिए प्रतिशत का उपयोग करने का भी प्रयास किया है - उदाहरण के लिए 1% - और फिर div की चौड़ाई को 98% पर सेट करना - लेकिन बॉक्स-छाया सीएसएस इसके लिए प्रतिशत स्वीकार नहीं कर रहा है आकार। मैंने ब्राउजर चौड़ाई का परीक्षण करने के लिए जावास्क्रिप्ट का उपयोग करने पर विचार किया है और उसके बाद बॉक्स-छाया तत्व को प्रदर्शित या छुपाएं, लेकिन यह इष्टतम समाधान की तरह प्रतीत नहीं होता है।
इसे संभालने का एक आसान तरीका होना चाहिए। विचार?
मुझे खेद है, लेकिन ऐसा लगता है कि यह पुन: उत्पन्न नहीं होता है। http://www.jsfiddle.net/xXXLK/1/ (ऊंचाई और पृष्ठभूमि रंग जोड़ा)। – mingos
यह परिणाम टैब में आपके पृष्ठ पर मेरे लिए प्रदर्शित करता है। फ़ायरफ़ॉक्स 3.6.13 में - यदि चौड़ाई 100% पर सेट की गई है तो आपको छाया को तब तक नहीं देखना चाहिए जब तक स्क्रीन पर्याप्त न हो, यह अधिकतम-चौड़ाई आकार से गुजरती है। –