CODEWITHSUNDEEP
javascripthtmlcssiframe
The Antarctican
The Antarctican

Reputation: 289

how to get iframe to fill entire page 100% and top:4px?

I've been coming here for a while, and only asked 1 question before. And I have designed many sites. But the only thing I do not fully get is 'iFrames'. They mess with my head a tad bit.

.:What i'm trying to achieve:.

note: I do not have ownership of the origin of the iFrames domain... It should be irrelevant since you are simply taking one page, and showing it on another. Their External Styling still shows their page how it should. I know this because i've done it.

1) I need to know how to get the iFrame to show on my site as a FULL PAGE. I know there are ALOT of topics on here about iFrames, but 1) they are outdated. 2) they do not apply to me/my site. I've tried everything, and yet it all seems futile.

.:Example:.

When user(s) go to http://www.example.com/news.php, the page should load the content from another news site. i.e cnn, wn, cbs...

I have figured this out before, so please no1 tell me all that rubble about not having ownership of contents, then I cannot reach my goal.

I don't remember how I wrote it, but I know there was NO CSS styling whatsoever. It was something VERY similar to:

    <body style="scrolling:no;>
    <iframe src='http://www.example.com' 
    style='position:absolute; top:4px; left:0px; width:100%; height:100%; 
    z-index:999' onload='sendParams();' frameborder='no' scrolling='auto'>
    </iframe>
    </body>

What I am not getting is: No matter what style I use to customize the iFrame, it seems to be held within a box about the size= 867x155. I even tried to put the iFrame itself within a DIV, and DIV set to: W- 100% H- 100%.

when I tried the CSS approach, the marginheight/width was ignored. Also, a different body style of margin="0", was futile; yet again.

Upvotes: 17

Views: 45557

Answers (2)

The Antarctican
The Antarctican

Reputation: 289

Ok, well I would like to thank Cynthia for her help.

But if anyone is looking for a simplistic answer that ACTUALLY works, then check this out:

Like the ORIGINAL inquiry: FULL iFrame

A resolve using CSS

<blah>
<head>
<style type="text/css">
    body {scrolling:no;
}
    iframe {position:absolute;
    z-index:1;
    top:0px;
    left:0px;
}
</style>
</head>
<body>
    <iframe src="http://www.wn.com" height="100%" width="100%" frameborder="0"></iframe>
</body>

Notice the positioning & z-index

*Note: This can be wrote through MARK-UP ONLY. You do not have to use CSS, but it makes more sense to do this because not only are you trying to have everything show correctly on yoru website; by using CSS to customize your iFrame, you open more windows for each individual frame within your webpage. If you are like me, and only using ONE iFrame, then you should simply use MARK-UP. But, if you have more than 1 [or 1 frame has many within], you should use CSS to specifically ID each frame. *

Also, if anyone is wondering how to use MARK-UP only, simply swap what's in the CSS, and put within the <iframe></iframe> but use single quotes

The Antarctican

Upvotes: 10

Cynthia
Cynthia

Reputation: 5403

Have a look: http://jsfiddle.net/cgXcR/

The HTML: 

<iframe src="http://www.cnn.com" height="100%"></iframe>​

The CSS:

body, html { width:100% ;
    height:100% ;
    overflow:hidden ;
}

iframe { width:100% ;
        height:100% ;
    border:none ;
}

Upvotes: 18

Related Questions