माता-पिता को भरने के लिए सीएसएस की चौड़ाई कैसे करें?

Question

मुझे यकीन है कि यह समस्या पहले भी पूछी जा चुकी है, लेकिन मुझे इसका जवाब नहीं मिल रहा है।

मेरे पास निम्नलिखित मार्कअप हैं:

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

मेरी इच्छा है कि फू की चौड़ाई 600px( width: 600px;) हो और बार बनाने के लिए निम्नलिखित व्यवहार हों:

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

दूसरे शब्दों में बार की चौड़ाई निर्धारित करने के बजाय 592pxमैं बार की बाहरी चौड़ाई को सेट करना चाहूंगा 100%ताकि इसकी गणना की जा सके 592px। यहां महत्व यह है कि मैं फू की चौड़ाई को बदल सकता हूं 800pxऔर बार इन सभी उदाहरणों के लिए गणित करने के बजाय मेरे द्वारा प्रदान किए जाने पर गणना करेगा।

क्या यह शुद्ध CSS में संभव है?

इसके साथ कुछ और मजेदार:

• क्या होगा अगर #barएक मेज है?
• क्या है अगर #barएक textarea है?

• यदि #barकोई इनपुट है तो क्या होगा ?

• क्या होगा अगर #fooएक टेबल सेल ( td) है? (क्या इससे समस्या बदल जाती है या समस्या समान है?)

---

अब तक table#bar, input#barचर्चा की गई है। मैंने textarea # बार के लिए एक अच्छा समाधान नहीं देखा है। मुझे लगता है कि बिना किसी बॉर्डर / मार्जिन / पैडिंग के साथ एक divटेक्सैरिया divस्टाइल के साथ बॉर्डर के रूप में काम कर सकता है textarea।

Answer 1

संपादित करें :

उन तीन अलग-अलग तत्वों के सभी अलग-अलग प्रतिपादन नियम हैं।

के लिए:

table#barआपको चौड़ाई को 100% पर सेट करने की आवश्यकता है अन्यथा यह केवल उतना ही चौड़ा होगा जितना यह निर्धारित करता है कि इसे होना चाहिए। हालाँकि, यदि तालिका की कुल पंक्तियाँ चौड़ाई से अधिक हैं, तो इसकी चौड़ाई का barविस्तार हो जाएगा। यदि मुझे याद है कि आप इसे निर्धारित करके display: block !important;इसका प्रतिकार कर सकते हैं, हालांकि इसके कुछ समय हो गए हैं क्योंकि ive को इसे ठीक करना था। (मुझे यकीन है कि अगर कोई गलत है तो मुझे सही करेगा)

textarea#barमैं beleive एक ब्लॉक स्तर का तत्व है, इसलिए यह div के समान नियमों का पालन करेगा। यहाँ केवल चेतावनी यह है कि textareaविशेषताओं को लें colsऔर rowsजिन्हें चरित्र स्तंभों में मापा जाता है। यदि यह तत्व पर निर्दिष्ट है, तो यह सीएसएस द्वारा निर्दिष्ट चौड़ाई को ओवरराइड करेगा।

input#barइनलाइन तत्व है, इसलिए डिफ़ॉल्ट रूप से आप इसे चौड़ाई नहीं दे सकते। हालांकि के लिए इसी तरह textareaकी colsविशेषता है, यह एक है sizeतत्व यह है कि चौड़ाई निर्धारित कर सकते हैं पर विशेषता। उस ने कहा, आप हमेशा display: block;इसके लिए अपने सीएसएस का उपयोग करके एक चौड़ाई निर्दिष्ट कर सकते हैं । फिर यह डिव के समान रेंडरिंग नियमों का पालन करेगा।

td#fooएक के रूप में प्रदान किया जाएगा table-cellजो इसके लिए कुछ पागलपन है। लब्बोलुआब यह है कि आपके उद्देश्यों div#fooके लिए इसकी सामग्री की चौड़ाई को सीमित करने के साथ ही कार्य करना है । यहां एकमात्र मुद्दा कॉलम में संभावित अपरिहार्य पाठ होने जा रहा है, जो इसे आपकी चौड़ाई सेटिंग की अनदेखी करेगा। साथ ही कॉलम की सभी कोशिकाएं चौड़ी सेल की चौड़ाई प्राप्त करने वाली हैं।

---

ब्लॉक स्तर के तत्व का डिफ़ॉल्ट व्यवहार - यानी। यदि चौड़ाई auto(डिफ़ॉल्ट) है, तो यह 100% युक्त तत्व की आंतरिक चौड़ाई होगी। संक्षेप में तो:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

आपको वही देगा जो आप चाहते हैं।

Comments

धन्यवाद। इसके अलावा टेबल के साथ मज़ा करने के लिए वैसे भी खून बहाना तय। मुझे लगता है कि तालिकाओं में divs के समान व्यवहार होता है?

— दिमित्री लखटेन

@Dimitry: नहीं, उनके पास विशेष नियम हैं जो उन्हें तत्वों की inline-blockतुलना में अधिक पसंद करते blockहैं। नोट कि हालांकि मैंने कहा और अधिक की तरह नहीं एक ही रूप में :-) क्या आप शायद का सामना जब तक अन्यथा परिभाषित वे आम तौर पर सभी स्तंभों जो वास्तव में कष्टप्रद हेडर के कुछ करता है, तो / कोशिकाओं उन्हें में लंबे unwrappable पाठ है हो सकता है समायोजित करने के लिए विस्तार होगा।

— 21

मदद करने के लिए धन्यवाद :) मुझे समस्याओं के बहुत अधिक पूर्ण अवलोकन देने के लिए प्रश्न को थोड़ा अद्यतन करने दें और उम्मीद है कि सभी वर्कअराउंड को एक खंड में सूचीबद्ध किया जा सकता है।

— दिमित्री लखटेन

मैं डिव # फू टेबल # बार और सेटिंग की चौड़ाई के साथ प्रयोग कर रहा हूं: टेबल # बार पर 100% वास्तव में टेबल का विस्तार होगा, लेकिन टेबल की सीमाएं / मार्जिन डिव # फू के माध्यम से खून बहाना होगा। तालिका को प्रदर्शित करने के लिए सेट करना: ब्लॉक अच्छा नहीं है क्योंकि यह तालिका के अन्य पहलुओं जैसे कि पंक्ति की चौड़ाई से निपटने के लिए खराब है। textarea # बार का विस्तार नहीं होगा जब चौड़ाई ऑटो पर सेट हो या सेट न हो।

— दिमित्रि लखटेन

क्योंकि textarea#barतुम display: blockथोड़ा प्रतिकूल प्रभाव के साथ सेट करने में सक्षम होना चाहिए । जहाँ तक तालिका है, मैं जानता हूँ कि ive अतीत में उस के लिए कुछ प्रकार के समाधान / शमन का उपयोग करता था, लेकिन मुझे याद नहीं है कि यह इस समय क्या था। हालाँकि मैं कहूंगा कि मैं आम तौर पर "मार्जिन" को एक मेज पर सेट नहीं करता, बल्कि इसे पैडिंग / मार्जिन के साथ एक डिव में लपेटता हूं ... यह इस प्रकार के रिक्ति को लागू करने के लिए # स्वयं या किसी अन्य div उपयोग किए गए jsut हो सकता है। इसके अलावा आप बॉर्डर इश्यू को

— काउंटर

Answer 2

लगभग वहाँ, बस बदलने outerWidth: 100%;के लिए width: auto;(outerWidth एक सीएसएस संपत्ति नहीं है)

वैकल्पिक रूप से, निम्नलिखित शैलियों को बार में लागू करें:

width: auto;
display: block;

Comments

अगर वह bar100% प्रभावी barरूप से अपने माता-पिता की तुलना में व्यापक बनाने के लिए जोड़ा जाएगा, तो उस पर काम नहीं करेगा अगर वह एक मार्जिन पैडिंग स्थापित कर रहा है foo।

— प्रोडगिटेलसन

हाँ, मैंने जवाब दिया कि बहुत तेज; पी

— रोवन

एक सेकंड रुको। इसलिए यदि मैं किसी भी चीज़ को चौड़ाई की संपत्ति निर्धारित करता हूं, तो इसके माध्यम से खून बहेगा? चौड़ाई: ऑटो समाधान नहीं है, बल्कि चौड़ाई बिल्कुल सेट नहीं है?

— दिमित्रि लखटेन

हाँ यह सही है। किसी भी तत्व को display:block;(जिसे ब्लॉक स्तर का तत्व भी कहा जाता है) इस व्यवहार को अपनाएगा। DIV तत्व डिफ़ॉल्ट रूप से सेट width:auto;और display:block;सेट होता है।

— रोवन

पुराना पोस्ट, लेकिन क्या वह बॉक्स-साइज़िंग का उपयोग नहीं कर सकता: बॉर्डर-बॉक्स को तत्व की चौड़ाई के अंदर पैडिंग करने की अनुमति देने के लिए।

— CHBresser

Answer 3

शैलियों का उपयोग करें

left: 0px;

या और

right: 0px;

या और

top: 0px;

या और

bottom: 0px;

मैं ज्यादातर मामलों के लिए सोचता हूं जो काम करेंगे

Answer 4

इसलिए अनुसंधान के बाद निम्नलिखित की खोज की गई है:

एक div#barसेटिंग के display:block; width: auto;लिए बराबर का कारण बनता हैouterWidth:100%;

एक के लिए table#barआप नीचे वर्णित नियमों के साथ एक div में लपेट की जरूरत है। तो आपकी संरचना बन जाती है:

<div id="foo">
 <div id="barWrap" style="border....">
  <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">

इस तरह तालिका माता-पिता को 100% तक ले जाती है, और तालिका में #barWrapसीमाओं / मार्जिन / पैडिंग को जोड़ने के लिए उपयोग किया जाता है #bar। ध्यान दें कि आपको पूरी चीज़ की पृष्ठभूमि सेट करने की आवश्यकता होगी #barWrapऔर उसकी #barपृष्ठभूमि पारदर्शी या समान होनी चाहिए #barWrap।

के लिए textarea#barऔर input#barआपको एक ही काम करने की आवश्यकता है table#bar, नीचे की तरफ यह है कि सीमाओं को हटाने से आप इनपुट / टेक्सटेरिया के देशी विजेट रेंडरिंग को रोक देते हैं और #barWrapबॉर्डर की सीमाएं बाकी सब चीजों की तुलना में थोड़ी अलग दिखेंगी, इसलिए आपको संभवतः इस तरह से अपने सभी इनपुट शैली।