CODEWITHSUNDEEP
csshtmliframe
Lloyd Banks
Lloyd Banks

Reputation: 36648

Having text / content scale down in an iFrame without creating extra white space

I have an iframe browser instance on my site which I've scaled down the content of using the answers found from this question. I noticed that because I am using CSS zoom and transform properties, I am getting extra whitespace around my iframe browser instance. The populated iframe plus the white space around it encompass the original width and height of my iframe (before being shrunk by transform and zoom).

This is what the result looks like:

enter image description here

Notice that the grey highlighted part is the original non-iframe part of the page. The iframe is the non-highlighted part of the page. Inside the original iframe, there is the scaled down browser instance and the extra white space around it.

What is the best way to get rid of this white space or is there a different way to scale down my iframe so that the extra white space is not created?

This is my current CSS:

#iframe {
    width: 800px; 
    height: 800px; 
    border; 1px solid black; 
    zoom: 1.00; 
    -moz-transform: scale(0.65); 
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.65); 
    -webkit-transform-origin: 0 0;
}

and HTML:

<iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>

Thanks!

Upvotes: 2

Views: 7143

Answers (2)

Lloyd Banks
Lloyd Banks

Reputation: 36648

I created a Div to encompass the iFrame. The Div acts as a restrictive perimeter for the iFrame and the extra white space is eliminated.

CSS: 

#iframe {
    width: 1100px; 
    height: 1000px; 
    border: 1px solid black; 
    zoom: 1.00; 
    -moz-transform: scale(0.65); 
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.65); 
    -webkit-transform-origin: 0 0;
}
#iframetest {
    width: 715px; 
    height: 650px; 
    margin: 10px; 
    border-style: solid; 
    border-width: 10px;
}        
#iframetest a {
    position: absolute; 
    top: -16px; 
    right: -16px;
}

HTML: 

echo "<div id = 'iframetest' style = 'display: none'>
          <iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>
          <a href = 'javascript: closeiframe();'><img src = 'images/exitbutton.png' 
           width = '22px' height = '22px'>
          </a>
      </div>";

Upvotes: 5

Dave Piersma
Dave Piersma

Reputation: 81

This code makes the entire page embed, but you can adjust the width and height 

<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.wsj.com" style="width:100%;height:100%"></iframe>
</body>

Upvotes: 0

Related Questions