iFrame Height To Full Content [duplicate] - html

This question already has answers here:
Adjust width and height of iframe to fit with content in it
(35 answers)
Closed 4 years ago.
I have a site where effectively i want to create a banner across the top and beneath display another site in it's entirety without an additional scrollbar within the page. So i've considered iframe but i cannot get it to display correctly. I want the page to load to the full height of the subservient pages content and alter accordingly. I want the simplest code possible to avoid confusion as my understanding of this is limited. This is the code i have tried
<iframe src="https://edition.cnn.com/" width="100%" height="100%" scrolling="no">
iframes are not supported by your browser.
If i put in say 5000 as the height i can display most of the page without a fixed scroll frame. If i put 100% as the iframe height the iframe is is very short like 150 high (a guess), dunno why it defaults to this small size if its 100%.
So is there a code i can add to the above so that it automatically adjusts the iframe to the full height of the content it is displaying.
Any pointers very much appreciated.
Thanks
p.s i used cnn purely for example purpose.

If you try to set the height to a 100%, this will mean that the element will try to fit a 100% in given property of given element's parent element. So for example, if the iframe height has been set to a 100% and the parent element has a height of 400 pixels (400px) and no other elements are present in given parent element, then the iframe will have the exact same size (not counting any whitespace that might occur).
For reference see my fiddle:
.iframe-container {
height: 400px;
}
<div class="banner">
Banner
</div>
<div class="iframe-container">
<iframe src="https://edition.cnn.com/" width="700px" height="100%" scrolling="no">
</iframe>
</div>
<div class="something-else">
Add here something else eventually...
</div>
JSFiddle
In this example, the height has to be expressed in pixels on the (parent) element with the class called iframe-container in order for the iframe to have a height assigned to it.

Related

Reduce the size of all elements in html like zooming out the page

Is it posible to reduce size off all html content inside of body tag?
I mean how to make all the content in html page to be smaller like when we zoom out the page to 90%.
For example: from this to be smaller like this
Any help is appreciated
All HTML content inside of the body tag can be "zoomed" in and out by using the CSS zoom attribute.
For example, to zoom content to 90% simply modify the body element to
body {
zoom: 90%;
}
The zoom attribute can also be directly added to the body tag.
For example,
<body style="zoom: 90%">
Content Here
</body>
I hope this provides the help you need.
If you've followed responsive design rules then all content will shrink and grow, adjusting to the screen height and width ( Basically, when you zoom out the height and width of the window increases.)
For example, let's say in your case you've set the width of the card to be xxpx, then it won't be responsive it'll always be xxpx on all screens.
If instead, you have set the width to be 20%, then, whatever the width of the window is you card will adjust to 20% of the total width.
Hopefully, I have answered your question correctly.

How can I resize an iframe element to change with the screen size?

I have an iframe element (specifically, a business intelligence dashboard) that needs to be embedded into a website. There is an "HTML editor" on the website's "back end" (i.e., a portion within the website that is designated for page admins).
Copying and pasting the iframe code and subsequently adjusting the height and width to properly fit the screen worked fine- but if I open the window on another screen, the iframe dimensions don't adjust for the different screen size.
Unfortunately, I don't think I have access to any CSS files in the company website (i.e., I don't think I have the ability to upload a CSS file), so I'm not too sure what I can do with most suggestions on SO. Does anyone know how I can set the iframe dimensions to be dynamic?
Web development isn't my speciality, so if I could provide better information, feel free to ask in the comments section.
Edited to add:
Following the first two responses, I inserted the HTML line
<iframe style="width:100%; height:500px;overflow:auto;">
and the iframe definitely changed sizes- but unfortunately, the grey space behind it (is that padding?) began appearing in different sizes, depending on the computer screen size. I've taken the following picture, with the red arrows pointing to grey space I'd like filled with the iframe and the blue arrows pointing to the iframe itself:
Here is the new code in the HTML editor, but with the link changed (to keep it anonymous):
<center>
<div>
<iframe style="width: 100%; height: 710px; overflow: auto;" src="https://app.powerbi.com/view?r=abc123..." frameborder="0" width="320" height="240">
</iframe>
</div>
</center>
For what it's worth, I've tried to delete the width="320" height="240" snippet at the end of the <iframe> tag, but as I click "update" in the HTML editor, the snippet reappears.
Even though you don't have direct access to the CSS, you can still change css by using inline styles.
The way you do that is by using the style="" inside the tag you want to change the CSS styles.
The way you make the width dynamic is by using the size as percentage instead of pixels.
For example:
<iframe style="border: 0; width:100%; height: 500px; overflow: auto;" src="http://www.example.com"></iframe>
Notice the width:100%;, this will cause the iframe to always be 100% of the screen size. The height will always be 500px, but you can change it to whatever you like.
You can use inline styling in the iframe element. Have a look at this link.
I set width to 100%, which means it will resize to whatever the size of the container. The height is fixed, but if it can't fit inside the container the overflow: auto; will make the scrolls show up.
<div>
<iframe style="width:100%; height:500px;overflow:auto;">
</iframe>
</div>

Facebook plugin social, iframe does not adapt width to its parent

I'm trying to put a Facebook social plugin <iframe> in this layout, but the problem is the content of this <iframe>, its not adapting to its parent width.
This is the <iframe> code:
<iframe id="fb-page" src="https://www.facebook.com/plugins/page.php?
href=https%3A%2F%2Fwww.facebook.com%2F505180683015806&tabs=timeline%2C%20messages&
height=500&
small_header=true&
adapt_container_width=true&
hide_cover=false&
show_facepile=false"
height="500" style="border:none;overflow:hidden;" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
*Code altered just for better presentation of PHP parameters.
As you can see, adapt_container_width is set to true, but nothing change, no matter the size of wrapper on page loading, always get width if passed in parameter or set width 340px, which is Facebook default value.
What was tested:
Specify width value as a PHP parameter, results in a content with absolute width and can cause some overflow content to be hidden.
Specify width with value '0' as a PHP parameter, results in a content with width 0px.
Specify width with value '100%25' as a PHP parameter, results in a blank frame.
Specify width with 100% on iframe element, don't change content width that will be always 340px (Facebook default value), or value defined via PHP parameter.
You can check with this fully functional jsfiddle, that already contain iframe code and HTML layout.
What I expect:
A way to make <iframe> content use 90% of its parent, instead of specify a absolute width and kill the responsiveness. And just use the <iframe> code that Facebook provide as option to render its content.
Thanks in advance.
Same for me. The only solution I came up with is:
.fb-likebox {
max-width: 288px;
overflow: hidden;
width: 288px;
}
with overflow:hidden at least doesn't make it look broken, but yes it does hide from the box.

How to resize iframe with real size

I've visited lots of posts but none of them gived me an answer that works.
I want to resize an iframe to the parent, for example a div.
The iframe tag resizes dynamically the width, but not the height.
How can I dynamically resize both?
If I write: <iframe src="http..." width="100%" height="400"></iframe> it always is 400 px of height.
But if I put a % there too it doesn't resize properly.
And if I want to have the iframe width and height of the page it is referencing in src, how can I do it?

Dynamic height in an iframe

I have this website: http://thc-racing.ucoz.com/index/forum/0-14
It can be seen that under the iframed forum there is a huge space, I made it so I can display as much as I can while navigating but, is there any way i can make the height adjust after each page inside is loaded?
Code:
<iframe
style="-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px"
height="4800" width="900"
frameborder="0" src="http://thc-racing.forumotion.co.uk/"></iframe>
I have access to CSS and Scripts on the forum.
Thanks
There is a similar question at Adjust width height of iframe to fit with content in it where you could use the code provided and modify it to adjust width and height with your own constant values, instead of auto-adjusting as the code provided in the accepted answer does.