Modal IFrame height

Question

I have an IFrame that pulls in a secure payment portal. I've simulated this here: http://jsbin.com/biyuzuwo/1

We've been having problems with customers with small screens and large fonts not being able to see the proceed/cancel buttons at the bottom of the IFrame. What was happening was the IFrame was often taller than the page, and the pages scrollbars were not affecting the IFrame.

Now as can be seen in that JSBin snipped - I've tried using % height for the IFrames min and max heights. This seems to work more or less in Chrome. However in Internet Explorer/Firefox the IFrame remains very small.

Am I going about this wrong. Is there a better way to do this?

.modal-body {
position:relative;    
  min-height:100%; max-height:100%;
    padding:15px;
  padding-top:0px;
    overflow-y:auto
}


#paymentIFrame{
  min-height: 70%;max-height: 70%;
}

Answer 1

You have to apply height to the parent elements also for this to work.

Checkout the fixed code here: http://jsbin.com/biyuzuwo/35/

Also you can read more on this article here: http://alistapart.com/article/creating-intrinsic-ratios-for-video