मेरे पास एक ब्लॉक है जिसका उपयोगकर्ता पते (div) शून्य या एक या अधिक हो सकता है। मैं चाहता हूं कि यदि div की संख्या 3 या अधिक हो तो ब्लॉक स्क्रॉल करने योग्य हो और ब्लॉक की अधिकतम ऊंचाई ऊंचाई के योग के बराबर हो 3 पते (3 div) या (अधिकतम ऊंचाई myDIV = पता-विवरण की ऊंचाई 1 + पता-विवरण की ऊंचाई 2 + पता-विवरण की ऊंचाई 3)

.लेकिन मुझे नहीं पता कि क्या गलत है?

https://jsfiddle.net/tp8hc72k/3/

var nodelist = document.getElementsByClassName("address-details").length;
if (nodelist >= 3) {
  maxhght = 0
  for (i = 0; i < 3; i++) {
    var elmnt = document.getElementById('myDIV').children[i];
    maxhght += elmnt.offsetHeight;
  }

  //alert(maxhght);
  document.getElementById("myDIV").setAttribute(
    "style", "maxHeight:maxhght;overflow: auto;width:100%");
}
.address-details {
  border: 1px solid black;
  margin: 0.5rem
}

#myDIV {
  border: 2px solid red;
}
<div id="myDIV">
  <div class="address-details">The 1 address element in the document.</div>
  <div class="address-details">The 2 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
</div>

<button onclick="myFunction()">Try it</button>
1
zharf pzh 5 सितंबर 2019, 13:19

4 जवाब

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

स्क्रॉल के प्रकट होने के लिए आपको max-height के बजाय height सेट करना होगा

function myFunction() {
  var nodelist = document.getElementsByClassName("address-details").length;
  if (nodelist >= 3) {
    maxhght = 0
    for (i = 0; i < 3; i++) {
      var elmnt = document.getElementById('myDIV').children[i];
      maxhght += elmnt.offsetHeight;
    }

    //alert(maxhght);
    document.getElementById("myDIV").setAttribute(
      "style", `height:${maxhght}px;overflow: auto;width:100%`);
  }
}
.address-details {
  border: 1px solid black;
  margin: 0.5rem
}

#myDIV {
  border: 2px solid red;
}
<div id="myDIV">
  <div class="address-details">The 1 address element in the document.</div>
  <div class="address-details">The 2 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
</div>

<button onclick="myFunction()">Try it</button>
0
Nidhin Joseph 5 सितंबर 2019, 10:27

निम्नलिखित का प्रयास करें, यह मार्जिन पर भी विचार करेगा। मार्जिन पतन से बचने के लिए मैंने स्पैन के साथ आंतरिक divs को स्विच किया।

let myDIV = document.getElementById('myDIV');
let elmnt = myDIV.children;
let computedStyle = null;
if (elmnt.length >= 3) {
  maxhght = 0
  for (let i = 0; i < 3; i++) {
    computedStyle = window.getComputedStyle(elmnt[i]);
    maxhght += elmnt[i].offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
  }
  myDIV.style.maxHeight = `${maxhght}px`;
  myDIV.style.overflowY = 'auto';
} else {
  myDIV.style.removeProperty('max-height');
  myDIV.style.removeProperty('overflow-y');
}
#myDIV {
  box-sizing: border-box;
  width: 100%
  border: 2px solid red;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.address-details {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid black;
  margin: 0.5rem;
}
<div id="myDIV">
  <span class="address-details">The 1 address element in the document.</span>
  <span class="address-details">The 2 address element in the document.</span>
  <span class="address-details">The 3 address element in the document.</span>
  <span class="address-details">The 4 address element in the document.</span>
  <span class="address-details">The 5 address element in the document.</span>
  <span class="address-details">The 6 address element in the document.</span>
</div>
0
Ernesto Stifano 5 सितंबर 2019, 10:50

आपको जावास्क्रिप्ट की आवश्यकता क्यों है? चूंकि एक एड्रेस डिव की ऊंचाई आपके द्वारा उपयोग किए जाने वाले फॉन्ट-साइज के आधार पर होगी, अगर आप सिर्फ फॉन्ट साइज ( 3em ) के डिव पर max-height डालते हैं + थोड़ा अतिरिक्त अकाउंटिंग सीमाओं के लिए ( calc( 3em + 8px ) यदि आप चाहें, तो 3.2 के बजाय), आपको यह व्यवहार बिना किसी JS के स्वचालित रूप से मिल जाता है।

.myDIV {
  border: 2px solid red;
  max-height: 3.2em;
  overflow: auto;
}
<div class="myDIV">
  <div class="address-details">The 1 address element in the document.</div>
  <div class="address-details">The 2 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
  <div class="address-details">The 3 address element in the document.</div>
</div>
<br>
<div class="myDIV">
  <div class="address-details">The 1 address element in the document.</div>
  <div class="address-details">The 2 address element in the document.</div>
</div>
0
Shilly 5 सितंबर 2019, 10:27

अंतिम पंक्ति को इसके साथ बदलें:

document.getElementById("myDIV").setAttribute(
"style", "max-height:"+maxhght+"px;overflow: auto;width:100%");
2
Riccardo Gai 5 सितंबर 2019, 10:24