0

背景故事：我有一个 SVG 画布，上面有一些折线。我还有一些 HTML<span>和<textarea>元素需要相对于这些折线精确定位。

我首先将 SVG 中的 HTML 元素放在<foreignElement>标签中，但我在那里遇到了问题，因为 IE 根本看不到它们，而 Firefox 也看不到<textarea>s。所以我把它们从 SVG 中取出，现在每个浏览器都能看到它们。

到目前为止，一切都很好。现在，我知道确保它们与折线正确定位的唯一方法是使用 CSS 为 HTML 元素和 SVG 画布提供绝对位置。

这是我的问题。在所有这些元素之上是一个标题 div。我希望整个 SVG 业务都位于标题下方的合理距离处。说 15 像素。但是由于 SVG 是绝对定位的，所以我需要知道该标题 div 的高度才能将 SVG 和相关的 HTML 元素放到正确的位置。

我试过 jQuery 的.height()方法和一些相关的方法。它们的问题在于 Firefox 和 Chrome 给出了两种不同的结果。我知道这并不能反映两者之间的真实像素高度差，因为我可以直观地看到 FF 中的标题略高，但 FF 给出的高度读数较小。

如何为我的标题 div 获得与浏览器一致的高度读数？或者至少一个我可以用来在每个浏览器中将其他元素绝对定位在它下方相同距离的位置。

4

1 回答 1

1

你可以试试这个功能

function getHeight() {
    return Math.min(
            Math.min(document.body.scrollHeight, document.documentElement.scrollHeight),
            Math.min(document.body.offsetHeight, document.documentElement.offsetHeight),
            Math.min(document.body.clientHeight, document.documentElement.clientHeight)
        );

}

或者简单地说document.documentElement.clientHeight，这通常在我用于测试的所有浏览器（Chrome、Firefox、Safari 和 Opera）中对我有用

[编辑] 上面的函数返回body的宽度和高度，为了对任何div使用它，使用这个

function getHeight(div) {
        return Math.min(div.scrollHeight, div.offsetHeight, div.clientHeight);  
    }

你可以像这样使用它

var myDiv = document.getElementById('myDivId');
console.log('the height is ' + getHeight(myDiv));

[edit2]请记住，根据浏览器的不同，div 实际上可能具有不同的大小。

假设这是 google chrome，顶部的绿色栏是导航栏，高度为 75px。您将其设置为 100%，填满您的屏幕，高度为 1000 像素，您将一个 100 像素的 div 放置在顶部，并将一个 100 像素的 div 粘贴到屏幕底部（蓝色）。它们之间的紫色 div 的高度为 725px。

谷歌浏览器示例

下面是Firefox。它被放置在同一个 1000px 的屏幕上，也是 100%，但它的导航栏有 100px 的高度。使用相同的 100px 蓝色 div 到顶部和底部，紫色 div 在这里将有 700px 的高度，与 chrome 不同。

火狐示例

当然，这是一个非常非常简单的例子，我怀疑这是你的情况。但是您可能对 div 展示位置有类似的问题，您应该尝试检查一下。

于 2012-09-14T07:46:22.660 回答