दो तत्वों के बीच शेष ऊंचाई को कैसे विभाजित करें? - जावास्क्रिप्ट, jquery, एचटीएमएल 5, jquery-ui, लेआउट

यह एक आम समस्या है जिसके लिए मुझे अभी तक एक सुरुचिपूर्ण समाधान नहीं मिला है:

मेरे पास एक div में दो ब्लॉक तत्व हैं (चलिए कहते हैं 4)। एक बहुत ही सरल लंबवत लेआउट।

पहले दो तत्वों ने ऊंचाई तय की है। शेष दो तत्वों को शेष स्थान को विभाजित करना चाहिए (यानी शरीर-ऊंचाई - प्रथम-तत्व-ऊंचाई - द्वितीय-तत्व-ऊंचाई)।

मुझे पता है कि मैं सिर्फ आकारों की गणना कर सकता हूं, लेकिन क्या यह हासिल करने का एक शानदार तरीका है?

मैं एक ऐसे समाधान की तरह हूं जो मूल ब्राउज़र सुविधाओं का उपयोग करता है (यह एक आंतरिक ऐप है जो केवल आधुनिक फ़ायरफ़ॉक्स / क्रोम संस्करणों पर चल रहा है, इसलिए खून बह रहा किनारा ठीक है) या jQuery / jQuery UI (हम पहले से ही इसका उपयोग करते हैं)।

उत्तर:

CSS3 फ्लेक्सबॉक्स लेआउट का प्रयोग करें: http://www.html5rocks.com/en/tutorials/flexbox/quick/

आप ऊंचाई की गणना के लिए jQuery का उपयोग कर सकते हैं।

मान लीजिए कि हमारे पास है:

<div id="parent" style="height:300px; background-color: red;">
<div id="first" style="height:100px; background-color: blue;">
</div>
<div id="second" style="height:100px;  background-color: #c6c6c6;">
</div>

<div id="third" style="background-color: #75ac19;" ></div>
<div id="fourth" style="background-color: black;"></div>
</div>

<script type="text/javascript">
var parrentHeight= $("#parent").height();
var firstBlock = $("#first").height();
var secondBlock = $("#second").height();
var remainingHeight = parrentHeight - (firstBlock + secondBlock);
$("#third, #fourth").height(remainingHeight / 2);
</script>

ऊंचाई और चौड़ाई के लिए percantage मान xx (%) के साथ और xx (px) के साथ खेलें।