Tengo un bloque cuyo número de direcciones de usuario (div) puede ser cero o uno o más. Quiero si el número de div es 3 o más, entonces el bloque puede desplazarse y La altura máxima del bloque es igual a la suma de la altura de 3 direcciones (3 div) o (altura máxima myDIV = la altura de los detalles de la dirección 1 + la altura de los detalles de la dirección 2 + la altura de los detalles de la dirección 3)

¿Pero no sé qué está mal?

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 sep. 2019 a las 13:19

4 respuestas

La mejor respuesta

Debe configurar height para que aparezca el desplazamiento en lugar de max-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 sep. 2019 a las 10:27

Pruebe lo siguiente, también tendrá en cuenta los márgenes. Cambié divs internos con luces para evitar el colapso del margen.

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 sep. 2019 a las 10:50

¿Por qué necesitas el javascript? Dado que la altura de un div de dirección dependerá del tamaño de fuente que use, si solo coloca un max-height en el div de 3 veces el tamaño de fuente (3em) + un poco de contabilidad adicional para los bordes (calc( 3em + 8px ) si así lo desea, en lugar de 3.2), obtiene este comportamiento automáticamente sin ningún 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 sep. 2019 a las 10:27

Reemplace la última línea con esta:

document.getElementById("myDIV").setAttribute(
"style", "max-height:"+maxhght+"px;overflow: auto;width:100%");
2
Riccardo Gai 5 sep. 2019 a las 10:24