javascript - 仅在有足够空间的情况下显示 div

Question

我正在寻找一种只在有空间的情况下显示 div 的解决方案。

在我博客的帖子页面上，我在左侧边栏中显示最新的帖子，就像这样...

No Nay Never post page

我想根据帖子的长度显示不同数量的侧边栏项目。目前我有三个 div 显示不同数量的项目并运行此脚本。

    if ($("#contentheight").height()>960 && $("#contentheight").height()<1200) {
  document.getElementById("threeposts").className += "hide";
}
else if ($("#contentheight").height()>1200 && $("#contentheight").height()<1880) {
  document.getElementById("fiveposts").className += "hide";
}
else if ($("#contentheight").height()>1880) {
  document.getElementById("sevenposts").className += "hide";
}

但是，这并不方便，对于非常短的帖子，它根本不显示任何项目。

是否有一种解决方法，例如，我可以为 7 个项目编写代码，但只显示父 div 可以容纳的数量？我尝试使用 overflow:hidden，但最终你将最终项目切成两半。

例如，如果有足够的空间容纳三个完整的项目，它们将被显示，但之后的任何项目都不会显示。

Answer 1

您可以创建隐藏的 div 或未插入到具有所需宽度的 DOM 的 div。

然后逐项插入，直到这个 div 的高度超过你的帖子的长度。
现在您知道该 div 可以容纳多少项了。