Question

我的网页上显示iframe。我希望iframe能够响应所有设备，所以我使用CSS变换来适应大多数屏幕宽度。唯一的问题是当屏幕重新调整大小并且正在执行CSS变换时，它会在iframe下面创建一个空白区域。是否有任何解决方案摆脱白色空间。可以使用jquery解决吗？

访问http://vintagebase.com

以下是响应式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;
  }
}

Answer 1

您将iframe高度设置为极为丰富的东西。不要那样做。而是100％。

在CSS TRANSFORM之后消除元素底部的空白空间

1 个答案: