css - 模态 IFrame 高度

Question

我有一个引入安全支付门户的 IFrame。我在这里模拟了这个: http://jsbin.com/biyuzuwo/1

我们遇到过小屏幕和大字体的客户看不到 IFrame 底部的继续/取消按钮的问题。发生的情况是 IFrame 通常比页面高，并且页面滚动条不会影响 IFrame。

现在可以在 JSBin 剪断中看到 - 我已经尝试使用 % height 作为 IFrames 的最小和最大高度。这似乎或多或少在 Chrome 中起作用。然而，在 Internet Explorer/Firefox 中，IFrame 仍然非常小。

我做错了吗？有更好的方法吗？

.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

您还必须将高度应用于父元素才能使其工作。

在这里检查固定代码: http://jsbin.com/biyuzuwo/35/

您还可以在此处阅读有关本文的更多信息: http://alistapart.com/article/creating-intrinsic-ratios-for-video