offsetHeight，clientHeight和scrollHeight没有给出正确的高度

Question

我已经了解了 offsetHeight ， clientHeight 和 scrollHeight 。仍然我不知道如何为包括以下内容的div设置正确的高度：

• 调整框大小
• 填充
• 保证金
• 边界
• 可能会推动div的其他事情

在下面的示例中，我做了4个部分。第一部分未更改，因此该部分的高度是自动且正确的。当我尝试在其他部分使用offsetHeight，clientHeight和scrollHeight设置高度时，结果不再正确。

如何以一种始终有效的方式进行计算？我在Stackoverflow上看到了很多答案，但没有可靠的解决方案。

window.addEventListener('DOMContentLoaded', (event) => {
  let items1 = document.querySelectorAll('.section1 div');
  let items2 = document.querySelectorAll('.section2 div');
  let items3 = document.querySelectorAll('.section3 div');
  
  items1.forEach((item) => {    
    item.style.height = item.offsetHeight + 'px';
  });
  
  items2.forEach((item) => {    
    item.style.height = item.clientHeight + 'px';
  });
  
  items3.forEach((item) => {    
    item.style.height = item.scrollHeight + 'px';
  });
});

.div1 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
  box-sizing: border-box;
 }
 
 .div2 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
 }
 
 .div3 {
  padding: .5rem;
  margin: .5rem;
  box-sizing: border-box;
 }
 
 .div4 {
  padding: .5rem;
  margin: .5rem;  
 }
 
 .div5 {
 }
 
 div[class^=div] {
   background: #eee;
   outline: 1px solid red;
 }
 
 body {
   display: flex;
 }
 
 section {
   background: #f5f5f5;
   margin: .5rem;
   width: 100px;
 }

<section class="correct">
  <div class="div1">Some<br>text</div>
  <div class="div2">Some<br>text</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Some<br>text</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section1">
  <div class="div1">Some<br>text</div>
  <div class="div2">Too<br>High</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section2">
  <div class="div1">Too<br>low</div>
  <div class="div2">Too<br>high</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section3">
  <div class="div1">Too<br>low</div>
  <div class="div2">Too<br>high</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

Answer 1

问题是您正在随机应用box-sizing。您应该将它们应用于同一部分中的所有元素，或者根本不应用于其中的几个元素。

正确的结果是第一个应用了box-sizing:border-box的结果。

window.addEventListener('DOMContentLoaded', (event) => {
  let items1 = document.querySelectorAll('.section1 div');
  let items2 = document.querySelectorAll('.section2 div');
  let items3 = document.querySelectorAll('.section3 div');

  items1.forEach((item) => {
    item.style.height = item.offsetHeight + 'px';
  });

  items2.forEach((item) => {
    item.style.height = item.clientHeight + 'px';
  });

  items3.forEach((item) => {
    item.style.height = item.scrollHeight + 'px';
  });
});

.div1 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
}

.div2 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
}

.div3 {
  padding: .5rem;
  margin: .5rem;
}

.div4 {
  padding: .5rem;
  margin: .5rem;
}

div[class^=div] {
  background: #eee;
  outline: 1px solid red;
}

body {
  display: flex;
}

section {
  background: #f5f5f5;
  margin: .5rem;
  width: 100px;
}

.section1 >*{
  box-sizing: border-box;
}

<section class="correct">
  <div class="div1">Some<br>text</div>
  <div class="div2">Some<br>text</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Some<br>text</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section1">
  <div class="div1">Some<br>text</div>
  <div class="div2">Too<br>High</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section2">
  <div class="div1">Too<br>low</div>
  <div class="div2">Too<br>high</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section3">
  <div class="div1">Too<br>low</div>
  <div class="div2">Too<br>high</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

在彼此之间加上box-sizing会使它们变小，因为两者都没有在计算中包括边界，并且以后给出的值将包括边界。

window.addEventListener('DOMContentLoaded', (event) => {
  let items1 = document.querySelectorAll('.section1 div');
  let items2 = document.querySelectorAll('.section2 div');
  let items3 = document.querySelectorAll('.section3 div');

  items1.forEach((item) => {
    item.style.height = item.offsetHeight + 'px';
  });

  items2.forEach((item) => {
    item.style.height = item.clientHeight + 'px';
  });

  items3.forEach((item) => {
    item.style.height = item.scrollHeight + 'px';
  });
});

.div1 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
}

.div2 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
}

.div3 {
  padding: .5rem;
  margin: .5rem;
}

.div4 {
  padding: .5rem;
  margin: .5rem;
}

div[class^=div] {
  background: #eee;
  outline: 1px solid red;
}

body {
  display: flex;
}

section {
  background: #f5f5f5;
  margin: .5rem;
  width: 100px;
}

.section1 >*,
.section2 >*,
.section3 >*{
  box-sizing: border-box;
}

<section class="correct">
  <div class="div1">Some<br>text</div>
  <div class="div2">Some<br>text</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Some<br>text</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section1">
  <div class="div1">Some<br>text</div>
  <div class="div2">Too<br>High</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section2">
  <div class="div1">Too<br>low</div>
  <div class="div2">Too<br>high</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section3">
  <div class="div1">Too<br>low</div>
  <div class="div2">Too<br>high</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

请注意，scrollHeight和clientHeight在此相同，因为没有溢出。

---

  

通常，offsetHeight是元素CSS高度的度量单位，包括任何边框，填充和水平滚动条（如果已渲染）。 ^ref

     

scrollHeight值等于元素的最小高度，以便在不使用垂直滚动条的情况下适合视口中的所有内容。高度的测量方式与clientHeight相同：它包括元素的填充，但不包括其边框，边距或水平滚动条（如果存在）。它还可以包括伪元素的高度，例如:: before或:: after。如果元素的内容不需要垂直滚动条就可以容纳，则其scrollHeight等于clientHeight ^ref

更新

如果您想要通用方法，则需要测试box-sizing。如果border-box认为offsetHeight，否则考虑clientHeight减去空白：

window.addEventListener('DOMContentLoaded', (event) => {
  let items = document.querySelectorAll('section:not(.correct) div');
  
  items.forEach((item) => {
    var e = window.getComputedStyle(item);
    var b = e.boxSizing;
    if(b =="border-box")
      item.style.height = item.offsetHeight + 'px';
    else 
      var p = parseFloat(e.paddingTop) + parseFloat(e.paddingBottom);
      item.style.height = (item.clientHeight - p) + 'px';
  });

});

.div1 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
  box-sizing: border-box;
 }
 
 .div2 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
 }
 
 .div3 {
  padding: .5rem;
  margin: .5rem;
  box-sizing: border-box;
 }
 
 .div4 {
  padding: .5rem;
  margin: .5rem;  
 }
 
 .div5 {
 }
 
 div[class^=div] {
   background: #eee;
   outline: 1px solid red;
 }
 
 body {
   display: flex;
 }
 
 section {
   background: #f5f5f5;
   margin: .5rem;
   width: 100px;
 }

<section class="correct">
  <div class="div1">Some<br>text</div>
  <div class="div2">Some<br>text</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Some<br>text</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section1">
  <div class="div1">Some<br>text</div>
  <div class="div2">Too<br>High</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section2">
  <div class="div1">Too<br>low</div>
  <div class="div2">Too<br>high</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section3">
  <div class="div1">Too<br>low</div>
  <div class="div2">Too<br>high</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Too<br>high</div>
  <div class="div5">Some<br>text</div>
</section>

Answer 2

经过多次测试，我已经弄清楚了。解决方案是使用getComputedStyle(item).getPropertyValue('height')。

在下面的示例中，第一个未触摸，而第二个通过上面的设置高度。

window.addEventListener('DOMContentLoaded', (event) => {
  let items4 = document.querySelectorAll('.section4 div');
  
  items4.forEach((item) => {    
    item.style.height = getComputedStyle(item).getPropertyValue('height');
  });
});

.div1 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
  box-sizing: border-box;
 }
 
 .div2 {
  border: 5px solid #fff;
  padding: .5rem;
  margin: .5rem;
 }
 
 .div3 {
  padding: .5rem;
  margin: .5rem;
  box-sizing: border-box;
 }
 
 .div4 {
  padding: .5rem;
  margin: .5rem;  
 }
 
 .div5 {
 }
 
 div[class^=div] {
   background: #eee;
   outline: 1px solid red;
 }
 
 body {
   display: flex;
 }
 
 section {
   background: #f5f5f5;
   margin: .5rem;
   width: 100px;
 }

<section class="correct">
  <div class="div1">Some<br>text</div>
  <div class="div2">Some<br>text</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Some<br>text</div>
  <div class="div5">Some<br>text</div>
</section>

<section class="section4">
  <div class="div1">Some<br>text</div>
  <div class="div2">Not too<br>High =)</div>
  <div class="div3">Some<br>text</div>
  <div class="div4">Not too<br>high =)</div>
  <div class="div5">Some<br>text</div>
</section>