Get height of a website and apply it to a div

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?

possible duplicate of http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window — younghawk, Jul 14 '16 at 09:10
@younghawk I opened a new question because it doesn't work for me ;) — , Jul 14 '16 at 09:11
What's the issue with `height:100vh`? That will take the height of your viewport, if that's what you wanted. — Gavin Thomas, Jul 14 '16 at 09:11
@GavinThomas I'll explain more, I have a webite like example.com and it has a height. I want to get the height of this website and automatically apply it to the div — , Jul 14 '16 at 09:12
Hi are you looking for a way to take the height of another website? 100vh will take the height of your viewport meaning your screen. Otherwise If i look at your code and your question, I assume you want the outer div to have the same height like your iframe? In that regard just do not set any height in the outer div. The div itself will expand according to its child element, meaning it will have the same height like your iframe. Correct me if I am wrong. — K Nugal, Jul 14 '16 at 09:12
I don't want the div to be the same height of the iframe... I want the div to be the same height of the website for example, example.com... — , Jul 14 '16 at 09:14
Let's say I have a blog and every day I add a new post, this means that the height will change every day on my blog. I want my other webpage to auto take the height of my blog and apply it to my div so it fits the blog in it... — , Jul 14 '16 at 09:16
If your webpage is only taking the one blog entry then don't give the div a height and it should just fit its content. The main reason this would fail is if you've fixed all the heights on the page and it's shrinking from external pressures. — Separatrix, Jul 14 '16 at 09:21
It's shrinking... That's the problem. On my webpage, I have a header and footer so... — , Jul 14 '16 at 09:21

Zerry Hogan · Accepted Answer · 2016-07-15T14:11:33.323

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

And what do I add in html ? I put id="yourElement" for the iframe ? — , Jul 14 '16 at 16:56

Get height of a website and apply it to a div

1 Answers1