Question

我有div.box个es，里面有多个元素，一个图片，两个文本框和一个链接。 div.box中的元素是动态填充的，因此它可以是多行文本或更大或更小的图像。无论如何，我正在min-height:210px;申请div.box。

210px是它内部元素高度的最大高度。我的页面布局实际上取决于210px的这个值，所以它不能更高。

然而它可以小于210px，所以我想用jQuery来检索元素的实际高度（如果没有设置最小高度）？

这可能吗？所以现在，如果我正在尝试$("div.box").height()，它将始终返回210px，因为这是元素的高度。如果不设置这个最小高度的css值，我怎样才能获得高度？我是否必须得到每个孩子的身高然后将它们加在一起？

提前谢谢你......

编辑：这有点复杂。我正在使用最小高度，因为我有一个网格布局，其中4个div.box是并排的。有多行。如果我不使用最小高度值并且其中一个框小于其他框，则框的下一行将跳出网格并对齐上方行的最高div框（div框浮动））

我试图用jQuery解决这个问题的原因是，我希望将此行的div-box高度始终设置为此行中最高的框。这有点可以理解吗？

所以现在所有的div-box都是min-height：210px，这意味着所有的盒子都有相同的高度。正如我所说，它是一个盒子网格，例如4x4左右。现在网格非常完美，因为所有的盒子都有相同的高度。但是想象一下第一行中的所有框都有一个小图像，一行文本不会填充div-box高度的210px。因此第一排盒子与第二排盒子之间的间隙在光学上看起来不太好 - 间距太大。

这就是为什么我想找出一个div.box的实际高度的原因所以我可以将最大值始终应用于一组四个框。所以所有行都有各自的高度......

如果没有样本，没有人能理解：）

编辑编辑：或者实际上是否可以通过css对盒子的每个第4个元素应用清除？那将是解决方案

Answer 1

因为您的-min-height为210，.height()将始终返回210px，除非内部元素将div.box扩展到更高的高度。

您可以做的是完全删除min-height并完全依赖.height()。

我还认为你在撰写问题时有点困惑，因为你提到min-height:210然后你说 210px是这些元素里面的最大高度 ......

无论如何，我创建了一个简单的jsFiddle来演示我的意思，http://jsfiddle.net/HpZX9/

<强> **修改

如果您想使用CSS清除每隔4 div.box，请使用以下代码：

.box:nth-child(4n) {
    clear: both; /* left, both, right, none */
}

**编辑编辑这是jQuery的解决方案。找到最高div http://jsfiddle.net/J4EpN/

Answer 2

~~就像我在评论中所说，~~

~~如果您将min-height更改为max-height，那么如果您执行.height()，您将获得所需内容。~~

如何获取top last child相对于div.box的{{1}}值，并将其添加div.box高度。

有点像这样，

last child's

检查fiddle（已更新）。

Answer 3

这是解决方案：

min-height refrence表示默认值为0，因此，将min-height重置为默认值可以得到框的绝对高度。

JS：

(function() {
  var abusolute_height, box, _min_height;
  box = $(".box");
  /*
  get _min_height
  _min_height maybe the min-height
  */
  _min_height = box.height();
  /*
  get absulute height
  */
  box.css({
    "min-height": 0
  });
  abusolute_height = box.height();
  if (_min_height > abusolute_height) {
    /*
        if the height of box is the min-height
        reset it
        */
    box.css({
      "min-height": _min_height
    });
  }
  alert("min height:" + _min_height);
  alert("abusolute height:" + abusolute_height);
}).call(this);

但最后显示的absulote height为_min_height。

点击jsfiddle

jQuery：设置css min-height时获取元素（或其子元素）的实际高度？

3 个答案: