如何根据div高度隐藏和显示

Question

我有一个带有id#emailBody 的<div>

#emailBody {
    width:100%;
    min-width:500px;
    float:left;
    margin-bottom:20px;
    max-height:90px;
    overflow:hidden;
}

现在，这里面是收到的电子邮件，所以有些电子邮件会放在90px height里面，但当我有长电子邮件时，它们就不适合了。

所以我放了overflow:hidden来隐藏多余的电子邮件，只显示相当于90px的邮件

我现在想做的是，如果电子邮件比90px height长，显示一个可以扩展高度以显示完整电子邮件的按钮，也许可以去掉max-height，用height:inherit代替。

我该如何做到这一点？因为打开了overflow:hidden，我无法使用max-height。

请帮助

Answer 1

EDIT：我改进了CSS，使其稍微更可靠。

如果没有JS，我不相信有完美的方法可以做到这一点。这里可能是最好的尝试方法：

HTML:

<div class="wrapper">
  <div class="email-content">Email Content</div>
  <div class="show-more"><a href="#">Show More</a></div>
</div>

CSS：

.wrapper {
  max-height: 90px;
  overflow: hidden;
  position: relative;
  border: 1px solid #000;
  // other styling
}
.show-more {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.show-more a {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 100%;
}

您需要调整max-height值以使所有内容都按预期排列。实际上，您可能希望使用em值，同时指定line-height。

使用这个标记，show-more链接将不会出现，直到包装器的高度向下延伸足够远。如果按原样将代码复制并粘贴到HTML文档中，则不会看到链接。如果用Email Content<br>的多个副本替换Email Content，它将显示在框的底部。

这保证了当到达max-height时，链接显示在框的底部。唯一的问题是wrapper的高度可能不会在不同的块中增加，因此show-more链路可能会被部分切断。