Html Set Div to it's content height

Hello,
I know that this question was asked many times
but still I didn't find the best way to do that for my code:
I use a <div> that is created in javascript
and contains an iframe.
Currently I set the div's to a constant height. which might cause a clipping of the iframe content.
How can I set the height dynamically (to be as the iframe height).
See code:
Thanks, Aryeh.
<html>
<head>
  <title>VCard</title>
  <style>
    #main_win_Div
    {
      vertical-align: middle;
      display: block;
      position: absolute;
    }
  </style>
</head>
<script src="jquery-1.7.2.min.js"></script>
<body bgcolor="#4D7690" style="margin: 0;">
  <div id='main_win_blanket' style='display: none;'>
  </div>
  <div id='main_win_div' style=''>
  </div>
  <div id='blanket' style='display: none;'>
  </div>
  <div id='main_div' style=''>
  </div>
</body>
<script>
  function showMainWindow(width, height, link) {
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', "main_win_Div");
    newdiv.innerHTML = "<iframe id='ifr' style='width: 100%; height: 100%; border: solid 0px red; overflow: hidden;' frameBorder='0' src='" + link + "'>";
    newdiv.style.left = ($(window).width() - width) / 2 + "px";
    newdiv.style.top = '0px';
    newdiv.style.width = width + 'px';
    newdiv.style.display = 'block';
    newdiv.style.overflow = 'hidden';
    newdiv.style.border = 'solid 0px red';
    document.getElementById('main_win_blanket').style.display = "inline";
    document.getElementById('main_win_div').insertBefore(newdiv, null);
    document.getElementById("main_win_div").style.visibility = "visible";
    newdiv.style.height = height + 'px';
  }

  var query = "<%=Request.ServerVariables("QUERY_STRING")%>";
  if (query == "")
  {
    showMainWindow(640, 1200, 'Login.aspx');
  }
  else
  {
    var link = "VCard.aspx?" + query;
    showMainWindow(640, 1200, link);
  }

  $(window).resize(function () {
    $('#main_win_Div').css({
      left: ($(window).width() - $('#main_win_Div').outerWidth()) / 2
    });
  });

</script>
</html>

Open in new window

the iframe is cut and cannot be seen
tuchfeldAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hans LangerCommented:
Hi, have you tried with javascript?, on load or resize the frame you can read the size of the iframe and resize the parent div.
Something like:

$('iframe').on('load resize', function() {
$('#parentdiv').height($(this).height())
} );

Open in new window


(not tested, just conceptual)
0
tuchfeldAuthor Commented:
I tried:
  $(window).on('load resize', function () {
  alert($("#ifr").height());
    $('#main_win_Div').css({
      left: ($(window).width() - $('#main_win_Div').outerWidth()) / 2,
      height: $("#ifr").height()
    });
  });

Open in new window

but the "alert()" shows 1200. i.e. the amount that the containing Div was set.
and not the actual (dynamic) height of the iframe.
0
Hans LangerCommented:
I see, can you try reading a div that is inside the IFRAME?.
0
tuchfeldAuthor Commented:
The content of the iframe is any html document
0
Hans LangerCommented:
If the iframe is in the same domain then you can read the document
$('iframe').contents().find("body").height()

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.