Menu
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.
825
To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio. Enjoy.
Follow these simple steps: Get the iframe embed code and paste in into your HTML page. Set the height and the width attributes of the iframe tag to 100% Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
Approach 2 - Flexbox approach. Set the display of the common parent element to flex , along with flex-direction: column (assuming you want the elements to stack on top of each other). Then set flex-grow: 1 on the child iframe element in order for it to fill the remaining space.
What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.
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 ;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
