在CSS转换后消除元素底部的空白

我的网页上显示了一个

iframe

。我希望

iframe

在所有设备上都能响应，因此我使用CSS转换来适应大多数屏幕宽度。唯一的问题是当屏幕被重新调整大小并且正在执行CSS转换时，它会在

iframe

下方创建一个空白。有什么办法可以消除空白吗。可以使用jquery解决吗

拜访

下面是响应CSS的示例

---#Tablet (Portrait)---

@media only screen and (min-width: 768px) and (max-width: 959px) {
  body:after {
    content: "768 to 959px";
    background-color: hsla(270,60%,40%,0.7);
  }

  #iframe1{
    width: 125%; 
    -moz-transform:           scale (.8);
    -moz-transform-origin:    0 0;
    -o-transform:             scale(.8);
    -o-transform-origin:      0 0;
    -webkit-transform:        scale(.8);
    -webkit-transform-origin: 0 0;
    -ms-transform:            scale(.8);
    -ms-transform-origin:     0 0;
  }
}

---

您正在将iframe高度设置为非常高的值。不要那样做。改为100%。

ok 100%不起作用，因为它在一个没有任何大小的div中。试着把iframe从那个div中放出来