html - 获取网站的高度并将其应用于 div

Question

我有一个网站，我们取http://www.example.com .在我的 html 中有

<div style="height:100vh;"><iframe src="http://www.example.com" style="position: relative; width: 100%; height: 100%; border:0;"></iframe></div>

此处 div 的高度为 100vh，但我想获取 example.com 的高度并自动将其应用于 div。我可以这样做吗？

Answer 1

这是一个有效的 JSFIDDLE https://jsfiddle.net/jsz9ur1g/1/

HTML

很多时候 html 没有扩展到全高度度，所以我添加了一个 div在 body 标签之前调用 getHeight 并给它一个绝对位置。这将确保它扩展到文档高度的 100%

<div id="getHeight">
</div>
<div id="yourElement">
</div>

CSS

如您所见，我为 HTML 设置了最小高度并将 getHeight div 设置为绝对定位并将其高度设置为 100%。

html{
  min-height:500px;
}
#getHeight{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}
#yourElement{
  background:red;
  color:#fff;
  font-size:20px;
}

JS

var bodyHeight = document.querySelector("#getHeight").offsetHeight;
//or use clientHeight if you don't car about scrollbars and borders
var yourElement = document.getElementById("yourElement");
yourElement.style.height = bodyHeight + "px";
yourElement.innerHTML = "see the height of the actual document is " + bodyHeight + "px";