title: How to change Iframe height when clicked on button inside the iframe's content
body: <p>Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
   function ChangeHeightF1() 
   {
      $("#inneriframe").css({"height":"350px;"});
      alert('The height was changed!');
  
   }
  &lt;/script&gt;
  &lt;div id="outerdiv"&gt;
      &lt;iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the code of the button which is in the content of the iframe:</p>
  
  <pre><code>&lt;button type="button" onclick="parent.ChangeHeightF1();"&gt;Click me to change Height!&lt;/button&gt;
  </code></pre>
  
  <p>So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.</p>
  
  <p>Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?</p>
  
  <p>Thanks in advance!</p>