当css min-height设置时，获取元素(或其子元素)的实际高度

Question

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

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

然而，它可以小于这个210px，所以我想使用jQuery来检索元素的实际高度(如果没有设置一个最小高度)?

这可能吗?现在，如果我想设置为$("div.box").height()它总是会返回210px因为那是元素的高度。如果这个最小高度css值没有设置，我怎么能得到高度呢?我需要得到每个孩子的身高然后把它们加起来吗?

提前谢谢你…

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

我试图用jQuery解决这个问题的原因是，我想要设置总是一行的div-box高度到这一行的最高框。这可以理解吗?

所以现在所有的div-box都是min-height:210px，这意味着所有的box都有相同的高度。就像我说的，它是一个格子，例如4x4左右。现在网格是完全完美的，因为所有的盒子都有相同的高度。但是，假设第一行中的所有框都有一个小图像，一行文本不填充div-box高度的210px。因此，第一行框和第二行框之间的间距在视觉上看起来不太好——间距太大了。

这就是为什么我想要找出一个div.box的实际高度的原因，这样我就可以将最大值总是应用到四个框的集合中。所以所有行都有各自的高度…

如果没有样本，我猜没人能理解:)

编辑编辑:或者，是否有可能通过css对框的每四个元素应用一个clear ?这就是解决方案了

Answer 1

就像我在评论中说的，

如果你改变min-height到max-height，然后如果你改变.height()，你会得到你想要的。

如何获得div.box中last child相对于div.box的top值，并将其与last child's的高度相加?

像这样，

var $box = $('.box');
var lastChildPos = $(':last-child', $box).position();
var lastChildHeight = $(':last-child', $box).height();
alert(lastChildPos .top + lastChildHeight);

检查这个小提琴(已更新)

Answer 2

因为你的-min-height为210,.height()将始终返回210px，除非里面的元素将div.box扩展到更大的高度。

你可以做的是完全删除min-height，只依赖.height()。

我也认为你在写你的问题时有点困惑，因为你提到min-height:210，然后你说210px是内部元素的最大高度…

总之，我已经创建了一个简单的jsFiddle来演示我的意思，http://jsfiddle.net/HpZX9/

* *编辑

如果你想使用CSS来清除每四个div.box使用以下代码:

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

* *编辑编辑下面是一个使用jQuery的解决方案。查找最高div http://jsfiddle.net/J4EpN/

Answer 3

解决方案:

min-height引用说它的默认值是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