Resizing iFrames based on its contents' height only working to enlarge?

Question

Take a look at the attached codepen to see what I mean. Try reducing the width of your browser, the frame should correctly resize. Then maximize your browser window and note that the frame doesn't re-adjust its height.

I have multiple frames stacked ontop of each other so this is quite an annoying issue.

I've tried using .height(), .outerHeight(), .innerHeight(), .scrollHeight and .clientHeight to no avail.

https://codepen.io/anon/pen/gxaLPW

var newHeight = $('#frame').contents().height();  
$('#frame').attr('height', newHeight);

Thanks in advance for any/all help!

Answer 1

try this

function resizeFrame() {
  var newHeight = $('#frame').contents().find("body").height();
  $('#frame').attr('height', newHeight + 20);
}