Skip to main content
This topic has been closed for replies.

2 replies

mytaxsite
mytaxsite
Inspiring
August 9, 2013

How big is the webpage?  You could try to create a big iframe with 700px x 960px and use scrolling="no" like in this example:

<iframe src="http://www.bbc.co.uk" name="bbc.co.uk"  height="700px" width="960px" frameborder="0" marginheight="20" marginwidth="35" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe>

I doubt you will be able to shrink anything within a fixed height/width environment.  Scrolling is always required.

Anyway you can try it but no guarantee to be a perfect solution.

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
August 9, 2013

You can get rid of scroll bars with css. Set the overflow for the iframe to hidden, like this...

iframe {

overflow:hidden;

}

That will remove scroll bars and cut off anything that scrolls in the iframe content.

To make the actual content schrink, you could use a css transform. In this page, I used the fox news website and made the width of the iframe large enough to not need a scroll bar, then shrank the iframe using a transform in the css. There's some fiddling around you need to do to get the positioning right (since it still initially takes up the original size specified in the css) but it can be done. This won't work in old browsers that can't read css transforms though...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

body {

    margin:0;

}

iframe {

    -ms-transform:scale(0.60);

    -moz-transform:scale(0.60);

    -o-transform: scale(0.60);

    -webkit-transform: scale(0.60);

    transform:scale(0.60);

    border:1px solid black;

}

iframe {

    position:relative;

    top:-240px;

    left:-220px;

    height:1200px;

    width:1100px;

}

#wrapper {

    overflow:hidden;

    border:1px solid orange;

    height:722px;

    width:662px;

}

</style>

</head>

<body>

<div id="wrapper">

<iframe src="http://www.foxnews.com"></iframe>

</div>

</body>

</html>

R
Rakesh35846263qzl2
Participant
March 4, 2024

not working  this css 

B
Community Expert
Ben MCommunity Expert
Community Expert
August 9, 2013

Add " frameborder="0" " to the iframe code.

Alternatively for Chrome/Safari you can add "seamless"and that should do the trick, but I don't think IE/Firefox support the seamless attribute yet.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices