пробелы после масштабирования css

Question

У меня есть iframe, который показывает масштабированные веб-сайты, но после масштабирования пробел остается, а размер его размер до масштабирования. Я попытался обернуть его разными div, поскольку нашел некоторые решения, но он не работает для меня, пространство все еще там.

Вы можете увидеть его here.

HTML

<div id='wrap'>  
<div id='preview_div'> 
    <iframe src="../404/index.php"></iframe> 
</div> 
</div> 

CSS

#preview_div { 
    position: relative; 
    width: 700px; 
    height:600px; 
    margin:auto; 
} 

iframe { 
    background-color:white; 
    width: 1400px; 
    height: 960px; 
    position: relative; 
    overflow:hidden; 
    border: none; 

    -moz-transform: scale(0.5); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(0.5); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.5); 
    -webkit-transform-origin: 0 0; 
} 

#wrap { 
    width:700px; 
    height:600px; 
    margin:auto; 
    float:left; 
} 

Любые идеи? Благодарю.

Answer 1

Если вы хотите избавиться от оконных полос прокрутки, вы можете применить overflow: hidden к #preview_div, чтобы скрыть лишнее пространство.

Answer 2

Внутри iFrame контейнер div() имеет ширину CSS 630px. Также есть пиксель с самим iFrame.