offsetHeight 等于父级的 offsetHeight，即使发生溢出

Question

我正在尝试设置字体大小以适合 div 容器的大小。我见过

offsetWidth

在类似的上下文中使用，因此对于我的应用程序，我使用

offsetHeight

因为溢出是垂直发生的。

但是，父级

offsetHeight

的

div

似乎等于包含文本的

offsetHeight

的

div

。我可以使用

element.parentElement.parentElement.offsetHeight

，但这反过来又没有考虑到祖父母也包含页脚，并且溢出未正确计算。

我是否使用了错误的属性或错误的方法来获取高度？

for (const element of document.getElementsByClassName("shrink")) {
  var size = 32;
  console.log(element.offsetHeight, element.parentElement.offsetHeight, element.parentElement.parentElement.offsetHeight)
  while (element.offsetHeight > element.parentElement.offsetHeight) {
    element.style.fontSize = size + "pt"
    size -= 1
  }
}

.party_card {
  padding: 1em 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  border: 1px black solid;
}

.party_cardtext {
  display: block;
  text-align: left;
  font-size: 32pt;
  word-break: break-word;
  flex-grow: 1;
}

#container {
  display: flex;
  height: 200px;
}

.footer {
  min-width: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.5em;
}

<div id="container">
  <div class="party_card">
    <div class="party_cardtext">
      <div class="shrink">Short text</div>
    </div>
    <div class="footer">
      <span>foo</span>
      <span>bar</span>
    </div>
  </div>
  <div class="party_card">
    <div class="party_cardtext">
      <div class="shrink">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="footer">
      <span>foo</span>
      <span>bar</span>
    </div>
  </div>
</div>

Answer 1

for (const element of document.getElementsByClassName("shrink")) {
  var size = 32;
  console.log(element.offsetHeight, element.parentElement.offsetHeight, element.parentElement.parentElement.offsetHeight)
  while (element.offsetHeight > element.parentElement.offsetHeight) {
    element.style.fontSize = size + "pt"
    size -= 1
  }
}

.party_card {
  padding: 1em 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  border: 1px black solid;
}

.party_cardtext {
  display: block;
  text-align: left;
  font-size: 32pt;
  word-break: break-word;
  flex-grow: 1;
  height:100%;
}

#container {
  display: flex;
  height: 200px;
}

.footer {
  min-width: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.5em;
}

<div id="container">
  <div class="party_card">
    <div class="party_cardtext">
      <div class="shrink">Short text</div>
    </div>
    <div class="footer">
      <span>foo</span>
      <span>bar</span>
    </div>
  </div>
  <div class="party_card">
    <div class="party_cardtext">
      <div class="shrink">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="footer">
      <span>foo</span>
      <span>bar</span>
    </div>
  </div>
</div>

我所做的只是将

height:100%

添加到

.party_cardtext

没有它，元素允许任意高度，并且会溢出。 offsetHeight 是元素的总高度，而不仅仅是适合父元素的部分。设置为 100% 可确保 div 粘在其父级内部，因为父级也设置了高度。