javascript - 设置 DIV 的高度以与所述 DIV 内的 anchor 位置相对应

Question

核心问题:http://jsfiddle.net/pipip/P46Xg/
我有一个 div带有几段文字的容器，
在其中一个段落中是以下 anchor <a name="stop" />
容器设置为 overflow:hidden

是否可以使用 javascript/JQuery 设置容器的高度，使容器的底部恰好停在 anchor 处或 anchor 下方？

增加了深度和背景:http://jsfiddle.net/pipip/yj9dB/
这将用于修改后的 JQuery Slider。使用 CMS 的人可以在其中键入 [readmore] anywhere 进入 Content 字段，这将通过 PHP 被上面的 anchor 替换。通过这种方式，他们可以轻松地控制 Read More 中断出现在容器中的位置。在相关example我将高度硬编码为 75px ，虽然我想要的是高度取决于 anchor 的位置 name="stop"在文中。

谢谢。如果这是一种糟糕的解决方法，我洗耳恭听!

Answer 1

使用 jQuery，您可以这样做:

$('#container').height( $('a[name=stop]').position()['top'] );

和 CSS:

#container {
    position: relative;
}

我们需要这个因为 .position() gives us the position relative to an element's offset parent ，我们可以通过将其 position 设置为 relative 来使 #container 成为 anchor 标记的偏移父级。

JSFiddle:http://jsfiddle.net/divad12/RYPm7/1/

此外，对于 HTML5，您可能需要考虑设置 anchor 标记的 id 属性而不是 name:HTML Anchors with 'name' or 'id'?