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";

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

1 个答案: