设置DIV的高度以对应于所述DIV内的锚的位置

Question

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

是否可以使用javascript/JQuery设置容器的高度,以便容器的底部正好停在锚点的下方？

添加深度和背景 :http://jsfiddle.net/pipip/yj9dB/
这将用于修改后的JQuery Slider.使用CMS的人可以[readmore] 在 "内容"字段中的任何位置键入内容,该字段将通过PHP替换为上述锚点.通过这种方式,他们可以轻松控制Read More break在容器中的位置.在相关的例子中,我将高度硬编码75px,尽管我想要的是高度取决于name="stop"文本中锚点的位置.

谢谢.如果这是一个糟糕的方式,我会全力以赴!

Answer 1

使用jQuery,你可以这样做:

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

和CSS:

#container {
    position: relative;
}

我们需要这个,因为.position() 给我们相对于元素的偏移父元素的位置,我们可以#container通过将其设置为position来创建锚标记的偏移父元素relative.

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

此外,对于HTML5,您可能需要考虑设置锚标记的id属性而不是name:HTML锚点带有'name'或'id'？