在CSS TRANSFORM後消除元素底部的空白空間

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的高度要的東西enourmous。不要這樣做。而是讓它100％。