मेरे पास एक पृष्ठ है जिसमें स्क्रॉल बार नहीं हो सकते हैं, इसलिए सब कुछ हर समय दृश्य में दिखना चाहिए। नीचे दी गई छवि पर आप स्क्रीन का मूल सेटअप देख सकते हैं, ताकि आप इसका प्रतिनिधित्व प्राप्त कर सकें।

sample

तो, दो ब्लॉक (1 और 2) हैं। पहला (1) विस्तार योग्य है, या यह सामग्री के आधार पर मौजूद भी नहीं हो सकता है। उस ब्लॉक के लिए अधिकतम-ऊंचाई 500px है और मैं मोबाइल उपकरणों का समर्थन नहीं करता, केवल iPads और कंप्यूटर समर्थित होंगे। दूसरा ब्लॉक (2) हर समय मौजूद रहता है, चाहे कुछ भी हो।

प्रश्न हैं: offsetTop के आधार पर दूसरे ब्लॉक को गतिशील रूप से कैसे आकार दें?

मुख्य रूप से मैंने इसके साथ @ViewChild() के माध्यम से काम करने की कोशिश की है, लेकिन यह हर समय परिवर्तनों का पता नहीं लगाता है और यह पृष्ठ को दृश्य क्षेत्र से परे जाने के लिए बनाता है।

इस तरह मैंने उसके साथ काम करने की कोशिश की है।

@ViewChild('block2') set offset(content: ElementRef) {
    content.nativeElement.style.maxHeight = `calc(100vh - ${this.offsetTop + 20}px)`;
}

दुर्भाग्य से, मैं स्रोत कोड साझा नहीं कर सकता, लेकिन किसी भी विचार की अत्यधिक सराहना की जाएगी।

दूसरे ब्लॉक को हर समय ऑफसेटटॉप परिवर्तन को सुनना होता है, और पृष्ठ के निचले स्थान को भरना होता है।

0
Alexander 11 जुलाई 2019, 18:38

1 उत्तर

सबसे बढ़िया उत्तर

आप इसे केवल सीएसएस के साथ संभाल सकते हैं, जावास्क्रिप्ट का उपयोग करने की कोई आवश्यकता नहीं है (यह जटिल और गैर अनुकूलित गणना करता है जिसे आपके ब्राउज़र द्वारा आसानी से नियंत्रित किया जा सकता है)। इसके बजाय, एक फ्लेक्स बॉक्स का उपयोग करें।

index.html

<div id="container">
  <div class="expandable">
    I am expandable
  </div>
  <div>
    I am not
  </div>
</div>

index.css

#container {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Ensure your container takes the full screen */
  height: 100vh;
  width: 100vw;

  /* Here is the magic */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

#container > *:not([class="expandable"]) {
  flex-grow: 1;
}

अब, आप प्रोग्रामेटिक रूप से अपने विस्तार योग्य div की ऊंचाई निर्धारित कर सकते हैं, और दूसरा स्क्रीन के बाहर बहने के बिना स्वचालित रूप से आकार बदल जाएगा।

संपादित करें

इस तरह पूरी तरह से काम नहीं हो सकता है, आपकी मूल परियोजना कैसे काम करती है, इसके आधार पर आपको एक या दो चीजों को समायोजित करने की आवश्यकता हो सकती है। flex-grow, जब एक फ्लेक्स बच्चे (फ्लेक्स कंटेनर नहीं) पर लागू किया जाता है, तो शेष स्थान को भरने के लिए बच्चे को स्वचालित रूप से विस्तारित कर देगा।

अधिक विवरण यहां : MDN - Doc

1
KawaLo 11 जुलाई 2019, 23:40