दिलचस्प पोस्ट
जावा में स्ट्रिंग सरणी को ऑब्जेक्ट सरणी कैसे परिवर्तित करें एक बैच फ़ाइल के अंदर प्रशासक का उपयोग करने का अनुरोध कैसे करें OS X पर Multiarch OpenSSL बनाएं "वीएस 2013 मचान में चयनित कोड जनरेटर चलाने में एक त्रुटि हुई" एजाक्स फ़ंक्शन द्वारा कॉल करने के लिए डायरेक्ट एक्सेस को रोकें डेटासेट से आउटलेयर कैसे निकालें मैं आईएनसी में एक निर्देशिका में एक पर्ल मॉड्यूल का उपयोग कैसे करूं? Android में java.lang.OutOfMemoryError समस्या को हल करने के लिए कैसे करें पायथन लैम्ब्डा समापन स्कोपिंग मैं क्रोम और फ़ायरफ़ॉक्स से खुले पृष्ठों के यूआरएल कैसे प्राप्त करूं? Google Plus लॉगिन के एकीकरण के साथ "एक आंतरिक त्रुटि हुई" सी में स्ट्रिंग कैसे घोषित करें सर्वर पक्ष पेजिंग के साथ jqgrid क्लाइंट साइड सॉर्टिंग – डेटा गायब हो जाता है एप (22.0.0) और टेस्ट ऐप (21.0.3) के लिए हल संस्करणों में भिन्नता है प्रपत्र अनुप्रयोग में कंसोल आउटपुट / विंडो कैसे दिखा सकता हूं?

माता-पिता की ऊँचाई को निर्दिष्ट किए बिना माता-पिता के div के 100% बच्चों को कैसे लागू करें?

मेरे पास निम्न संरचना वाली साइट है:

<div id="header"></div> <div id="main"> <div id="navigation"></div> <div id="content"></div> </div> <div id="footer"></div> 

नेविगेशन बाईं तरफ है और सामग्री डिवा सही पर है सामग्री डिवेल के लिए जानकारी को PHP के माध्यम से खींचा जाता है, इसलिए हर बार यह अलग होता है

कैसे नेविगेशन को खड़ी पैमाने पर स्केल किया जाए ताकि इसकी ऊंचाई सामग्री डीव की ऊंचाई के समान हो, कोई फर्क नहीं पड़ता कि कौन सा पेज लोड हो रहा है?

वेब के समाधान से एकत्रित समाधान "माता-पिता की ऊँचाई को निर्दिष्ट किए बिना माता-पिता के div के 100% बच्चों को कैसे लागू करें?"

नोट : यह उत्तर फ्लेक्सबॉक्स मानक के समर्थन के बिना लीगेसी ब्राउज़र पर लागू होता है। एक आधुनिक दृष्टिकोण के लिए, देखें: https://stackoverflow.com/a/23300532/1155721


मेरा सुझाव है कि आप क्रॉस-ब्राउज़र सीएसएस और नो हैक्स के साथ समान ऊंचाई कॉलम पर एक नज़र डालें।

असल में, एक ब्राउज़र संगत तरीके से सीएसएस के साथ ऐसा करना तुच्छ नहीं है (लेकिन तालिकाओं के साथ तुच्छ) तो अपने आप को एक उपयुक्त पूर्व-पैक समाधान मिलें

इसके अलावा, इसका उत्तर भिन्न होता है कि आप 100% ऊंचाई या समान ऊंचाई चाहते हैं या नहीं। आमतौर पर इसकी समान ऊंचाई होती है यदि यह 100% ऊँचाई है, तो इसका उत्तर थोड़ा अलग है।

माता-पिता के लिए:

 display: flex; 

आपको कुछ उपसर्गों को जोड़ना चाहिए, http://css-tricks.com/using-flexbox/

संपादित करें: @ एडम गार्नर ने नोट किया, संरेखित-आइटम: खिंचाव; आवश्यकता नहीं है। इसका उपयोग माता-पिता के लिए भी नहीं है, न कि बच्चों। यदि आप बच्चों को खींचने के लिए परिभाषित करना चाहते हैं, तो आप संरेखित करें-स्व उपयोग करें।

यह एक निराशाजनक मुद्दा है जो हर समय डिजाइनरों से निपटा है चाल है कि आपको अपने सीएसएस में बॉडी और एचटीएमएल पर ऊंचाई को 100% पर सेट करना होगा।

 html,body { height:100%; } 

यह प्रतीत होता है कि निरर्थक कोड ब्राउज़र को परिभाषित करना है जो 100% का मतलब है। निराशा, हाँ, लेकिन सबसे आसान तरीका है

मुझे लगता है कि display: table-cell; करने के लिए दो स्तंभों की स्थापना display: table-cell; float: left; बजाय float: left; अच्छा काम करता है।

यदि आप नेविगेशन डिवीजन को एक अनपेक्षित रूप से छोटी सामग्री डिवीज की स्थिति में चिपकाने का मन नहीं लगाया है, तो कम से कम एक आसान तरीका है:

 #main { position: relative; } #main #navigation { position: absolute; top: 0; left: 0; bottom: 0; width: 10em; /* or whatever */ } #main #content { margin: 0; margin-left: 10em; /* or whatever width you set for #navigation */ } 

वैसे भी नकली-स्तंभ तकनीक है

 #main { overflow: hidden; } #navigation, #content { margin-bottom: -1000px; padding-bottom: 1000px; } 

jQuery का उपयोग कर:

 $(function() { function unifyHeights() { var maxHeight = 0; $('#container').children('#navigation, #content').each(function() { var height = $(this).outerHeight(); // alert(height); if ( height > maxHeight ) { maxHeight = height; } }); $('#navigation, #content').css('height', maxHeight); } unifyHeights(); }); 

height : <percent> केवल तभी काम करेगी जब आपके पास निश्चित प्रतिशत ऊँचाई वाले सभी अभिभावकीय नोड्स पिक्सल, ईएमएस, आदि में एक निश्चित ऊंचाई के साथ शीर्ष स्तर पर हैं। इस तरह, ऊंचाई आपके तत्व के नीचे झरना होगा

आप 100% को html और बॉडी एलीमेंट्स के रूप में निर्दिष्ट कर सकते हैं जैसे कि @ट्रैविस पहले आपके नोड्स के नीचे पृष्ठ ऊंचाई को कैस्केड कर सकते हैं।

नीचे मार्जिन 100% बनाने का प्रयास करें

 margin-bottom: 100%; 
 #main { display: table; } #navigation, #content { display: table-cell; } 

इस उदाहरण को देखें

इस आलेख में वर्णित विधि के आधार पर मैंने बनाया है। कम गतिशील समाधान:

एचटीएमएल:

 <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div> 

कम:

 /* Changes these variables to adjust your columns */ @col1Width: 60%; @col2Width: 1%; @padding: 0%; /* Misc variable. Do not change */ @col3Width: 100% - @col1Width - @col2Width; #container3 { float: left; width: 100%; overflow: hidden; background-color: red; position: relative; #container2 { float: left; width: 100%; position: relative; background-color: yellow; right: @col3Width; #container1 { float: left; width: 100%; position: relative; right: @col2Width; background-color: green; #col1 { float: left; width: @col1Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding; overflow: hidden; } .col2 { float: left; width: @col2Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding + @padding * 2; overflow: hidden; } #col3 { float: left; width: @col3Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding + @padding * 4; overflow: hidden; } } } } 

लंबे समय तक खोज और प्रयास करने के बाद, मेरी समस्या को हल करने के अलावा कुछ भी नहीं

 style = "height:100%;" 

बच्चों div पर

और माता-पिता के लिए यह लागू होते हैं

 .parent { display: flex; flex-direction: column; } 

मैं भी बूटस्ट्रैप का उपयोग कर रहा हूं और यह मेरे लिए उत्तरदायी नहीं है।

मुझे पता है कि सवाल उठने के बाद से यह बहुत समय हो गया है, लेकिन मुझे एक आसान समाधान मिला और सोचा कि किसी ने इसका इस्तेमाल (गरीब अंग्रेजी के बारे में क्षमा) कर सकता था। ये रहा:

सीएसएस

 .main, .sidebar { float: none; padding: 20px; vertical-align: top; } .container { display: table; } .main { width: 400px; background-color: LightSlateGrey; display: table-cell; } .sidebar { width: 200px; display: table-cell; background-color: Tomato; } 

एचटीएमएल

 <div class="container clearfix"> <div class="sidebar"> simple text here </div> <div class="main"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante. </div> </div> 

सरल उदाहरण ध्यान दें कि आप जवाबदेही में बदल सकते हैं

आरडब्लूडी प्रोजेक्ट में सर्वश्रेष्ठ jQuery का उपयोग करना होगा। छोटे स्क्रीन के लिए आप उच्च ऊंचाई को बनाए रखना चाहते हैं, क्योंकि कॉल 1, कोला 2 और कोले 3 को एक तरफ एक पर रखा गया है।

हालांकि एक मीडिया क्वेरी ब्रैक प्वाइंट के बाद आप सभी कॉलमों के लिए समान ऊंचाई के साथ एक दूसरे के बगल में कोप को पसंद करेंगे।

1125 पीएक्स केवल विंडो चौड़ाई ब्रेक पॉइंट का एक उदाहरण है जिसके बाद आप सभी स्तंभ एक ही ऊंचाई पर सेट करना चाहते हैं।

 <div class="wraper"> <div class="col1">Lorem ipsum dolor sit amet.</div> <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div> <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div> </div> 

यदि आप की आवश्यकता होती है तो आप अधिक से अधिक ब्रेक पॉइंट सेट कर सकते हैं।

 <script> $(document).ready(function(){ $(window).on('load resize', function() { if (window.innerWidth>= 1125) { $('.col1').height($('.wraper').height()); $('.col2').height($('.wraper').height()); $('.col3').height($('.wraper').height()); } if (window.innerWidth < 1125) { $('.col1').height('auto'); $('.col2').height('auto'); $('.col3').height('auto'); } }); }); </script> 

प्रश्न के शीर्षक और सामग्री में एक विरोधाभास का एक सा है। शीर्षक एक माता पिता की बोली के बारे में बोलता है, लेकिन सवाल यह कहता है कि आप दो भाई-बहनों (नेविगेशन और सामग्री) को एक ही ऊंचाई के लिए चाहते हैं।

क्या आप (ए) दोनों नेविगेशन और सामग्री दोनों की ऊंचाई की 100% ऊंचाई चाहते हैं, या (बी) नेविगेशन और सामग्री की समान ऊंचाई होना चाहते हैं?

मैं मान लेता हूँ (बी) … यदि ऐसा है, तो मुझे नहीं लगता है कि आप इसे अपने वर्तमान पृष्ठ संरचना (कम से कम, शुद्ध सीएसएस और नहीं पटकथा के साथ) दिए जाने में सक्षम होंगे। आपको शायद कुछ ऐसा करना होगा:

 <main div> <content div> <navigation div></div> </div> </div> 

और नेविगेशन फलक की चौड़ाई जो कुछ भी है, का एक बाएं किनारा रखने के लिए सामग्री डिवा को सेट करें इस प्रकार, सामग्री की सामग्री नेविगेशन के दायीं ओर है और आप नेविगेशन डिवा को 100% सामग्री की ऊंचाई तक सेट कर सकते हैं।

संपादित करें: मैं इसे पूरी तरह से अपने सिर में कर रहा हूं, लेकिन आपको नेविगेशन डिवीज़ के बाएं हाशिये को किसी नकारात्मक मान पर सेट करने की ज़रूरत होगी या इसे पूर्ण रूप से 0 पर छोड़ दिया जाएगा जिससे कि इसे अब तक बाईं ओर वापस ले जाएगा। समस्या यह है कि, इसे खींचने के कई तरीके हैं, लेकिन सभी ब्राउज़र सभी ब्राउज़र के साथ संगत नहीं हैं।

[डीएमटीआई के दूसरे कोड में कम कोड का संदर्भ दे रहा है] मैं अनुमान लगा रहा हूं कि यह किसी प्रकार का "छद्म कोड" है?

मैं जो समझता हूं, वह गलत-कॉलम तकनीक का उपयोग करने की कोशिश करता है जो कि चाल करना चाहिए।

http://www.alistapart.com/articles/fauxcolumns/

उम्मीद है की यह मदद करेगा 🙂

जैसा कि पहले दिखाया गया है, फ्लेक्सबॉक्स सबसे आसान है। जैसे।

 #main{ display: flex; align-items:center;} 

यह मूल तत्व के भीतर केंद्र में सभी बच्चे तत्वों को संरेखित करेगा।

मेरा समाधान:

 $(window).resize(function() { $('#div_to_occupy_the_rest').height( $(window).height() - $('#div_to_occupy_the_rest').offset().top ); }); 
 .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } 

से:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

बूटस्ट्रैप को बताता है लेकिन इसका उपयोग करने के लिए आपको बूटस्ट्रैप की आवश्यकता नहीं है। इस पुराने प्रश्न का उत्तर देते हुए, जैसा कि यह मेरे लिए काम करता है, और कार्यान्वयन करना बहुत आसान लगता है

यह वही उत्तर था जो मैंने इस सवाल को प्रदान किया था

ऐसा करने का सबसे आसान तरीका यह सिर्फ नकली है एक सूची के अलावा वर्षों से इस व्यापक रूप से कवर किया गया है, जैसे कि 2004 से दान सीडरहोल्म के इस लेख में ।

यहां बताया गया है कि मैं आमतौर पर यह कैसे करता हूं:

 <div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;"> <div id="navigation" style="float:left;width:190px;padding-right:10px;"> <!-- Navigation --> </div> <div id="content" style="float:left;width:750px;"> <!-- Content --> </div> </div> 

आप # कंटेनर को दूसरे डिवा में लपेटकर इस कंटेनर के भाई के रूप में हैडर डिवीजन को एम्बेड करके और मार्जिन और चौड़ाई वाली शैलियों को पैरेंट कंटेनर में आसानी से जोड़कर इस डिज़ाइन पर एक हेडर जोड़ सकते हैं। साथ ही, सीएसएस को एक अलग फाइल में स्थानांतरित किया जाना चाहिए और इनलाइन नहीं रखा आदि। अंत में, साफ़फ़िक्स क्लास स्थिति स्थिति पर पाया जा सकता है।