Получите высоту веб-сайта и примените его к 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 не расширяется до полной высоты Bodys, поэтому я добавил DIV под названием 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";