2009-02-21 16 views
5

मैं div को 100% ऊंचाई और चौड़ाई को किसी अन्य तत्व के अंदर कैसे स्केल कर सकता हूं? मेरे मामले में एक sourrounding टीडी। चूंकि मैं एक प्लगइन हूं, इसलिए मैं पेज पर अन्य एचटीएमएल को नियंत्रित नहीं कर सकता। यहां मेरा एचटीएमएल है:मैं किसी अन्य तत्व के अंदर एक div को 100% ऊंचाई और चौड़ाई कैसे स्केल कर सकता हूं

<body style="height:100%;"> 
    <table width="600px" height="400px" border="1"> 
    <tr> 
     <td style="background-color:silver;">Cell 1</td> 

     <td style="background-color:silver;"> 
    <div style="height:100%; background-color:yellow;"> 
     <div style="min-height:100%; height:100%; background-color:red;"> 
     Cell 2 
     </div> 
    </div> 
     </td> 
    </tr> 
    </table> 
</body> 

तो, सेल 2 div को अधिकतम किया जाना चाहिए। क्या ऐसा करने के लिए एक क्रॉस ब्राउज़र तरीका है? यह इतना जटिल क्यों है?

+0

उपरोक्त कोड के साथ क्या गलत है ??? बस इसे एफएफ 3 और आईई 6/7 में खोला गया, और लाल div पूरे सेल को ले जाता है। –

उत्तर

1

दोनों पक्षों को एक div के भीतर div क्यों होना चाहिए यदि यह ऊंचाई और चौड़ाई का 100% होगा? क्या आपके उद्देश्य के लिए युक्त div का उपयोग करने का कोई अन्य तरीका नहीं है?

यह शायद काम नहीं कर रहा है क्योंकि ऊंचाई विफल हो जाती है जब तक कि containg तत्व की कुछ निश्चित ऊंचाई लागू न हो।

+0

मुझे इसे एक Google मानचित्र जोड़ने के लिए div की आवश्यकता है। – mzehrer

+0

क्या आप अभी Google मानचित्र डाल सकते हैं और इसे मूल div भरने देते हैं? – Sam152

5

this stack overflow question पर भी देखें ... उस प्रश्न में the top rated answer की समीक्षा करने के बाद, ऐसा लगता है कि आपको कंटेनर की ऊंचाई 100% और "बाल-ऊंचाई की ऊंचाई, ऊंचाई" 100% तक सेट करना है।

अधिक जानकारी के लिए this website पर जाएं - नीचे HTML छीन नीचे है वेबसाइट

<div style="height:100%;"> 
    <div style="min-height:100%; height:100%; background-color:red;"> 
    put your content here 
    </div> 
</div> 
+0

यह मेरे लिए काम नहीं करता है, प्रश्न में मेरे संपादित उदाहरण देखें। – mzehrer

+0

?? आपकी तालिका 400px ऊंची है, div –

+2

से पहले नहीं चलेगा यह मुझे भी पकड़ा - आपूर्ति किए गए लिंक ने समस्या हल की। मेरे मामले में भी एचटीएमएल और बॉडी की ऊंचाई 100% –

2

के संस्करण जावास्क्रिप्ट/jQuery का उपयोग करते हुए आप आसानी से पेरेंट तत्व की ऊंचाई पाने और उसके अनुसार अपनी div आकार बदल सकते हैं।

हालांकि, चूंकि एक तालिका कक्ष में div स्थित है, इसलिए चौड़ाई तय नहीं होती है क्योंकि सेल तालिका में अन्य कोशिकाओं की सामग्री के अनुसार विस्तार और अनुबंध करेगा। तो वास्तव में कोई सही चौड़ाई नहीं है, सेल सभी कोशिकाओं की सामग्री के अनुसार खुद को अनुकूलित करेगा।

वैसे, आपकी ऊंचाई की समस्या आसानी से इसे 400px पर सेट करने के लिए हल हो जाएगी, लेकिन मुझे लगता है कि दिखाया गया तालिका संरचना केवल एक उदाहरण है (1 पंक्ति, 400 पीएक्स ऊंचाई ...)।

+0

होने की आवश्यकता थी, मैंने सोचा कि इसे अकेले एचटीएमएल/सीएसएस का उपयोग करके हल किया जा सकता है। और हाँ, 400 पीएक्स उदाहरण के लिए हैं। – mzehrer

+0

जैसा मैंने कहा, कोई सही जवाब नहीं है क्योंकि तालिका कक्षों की ऊंचाई और चौड़ाई स्वचालित रूप से बदल जाती है, इसलिए मुझे नहीं लगता कि एक HTML/css समाधान मौजूद है। – jeroen

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