Get height of a website and apply it to a div - html

Question

I have a website, let's take http://www.example.com. In my html I have
<div style="height:100vh;"><iframe src="http://www.example.com" style="position: relative; width: 100%; height: 100%; border:0;"></iframe></div>
Here the div has the height of 100vh but I want to get the height of example.com and automatically apply it to the div. Can I do that?

Answer 1

Here is a working JSFIDDLE https://jsfiddle.net/jsz9ur1g/1/
HTML
Alot of times the html doesn't expand to the full bodys height, So i added a div
called getHeight right before the body tag and gave it a position of absolute. This will ensure that it expands to 100% of the document height
<div id="getHeight">
</div>
<div id="yourElement">
</div>
CSS
As you can see i gave the HTML a min height and set the getHeight div to position absolute and gave it a height of 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";