只有足够的空间显示DIV

Question

我正在寻找仅在有空间的情况下显示DIV的解决方案。

在我的博客的帖子页面上，我在左侧栏上显示最新帖子，例如...

no nay永远不会发布页面

我想显示不同数量的侧栏项目，取决于帖子的时间。目前，我有三个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可以接受的数量？我尝试使用溢出：隐藏，但最终将最终项目切成两半。

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

Answer 1

您可以创建一个隐藏的DIV或一个未插入带有所需宽度的DOM的div。

然后逐项插入项目，直到该div的高度超过您的帖子的长度。
现在您知道将有多少个项目适合Div。

Answer 2

尝试这样的东西：

$('#container').children().each( function() {
  var top = $(this).top;
  var height = $(this).height;
  if (top + height > $(this).parent().height()) {
    $(this).className += "hide";
  }
});