0

I have an iframe that I would like to align perfectly within the container on my website. Right now, there is still a border when I inspect the container containing the iframe element:

enter image description here

The iframe is embedded as following:

<style>
iframe {
  width: 100%;
  min-height: 500px;
}
</style>
<iframe id="myIframe" frameborder="0" height="100%" width="100%"src="path_to_my_file"></iframe>

I would also like for the height of the iframe to automatically be adjusted to the height of the container. That would mean that it would need to be adjusted every time the window size changes, so I would probably need a javascript method. Is there an efficient way to achieve that?

mplungjan
  • 169,008
  • 28
  • 173
  • 236
dmmpie
  • 365
  • 2
  • 14
  • Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. Please first ***>>>[Search for related topics on SO](https://www.google.com/search?q=align+iframe+border+viewframe+site%3Astackoverflow.com)<<<*** and if you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. It also helps tagging relevant frameworks like bootstrap – mplungjan Nov 09 '21 at 09:05
  • The border the inspector shows is the padding from the parent element. Simply use the class `p-0` instead of `py-md-5 pl-md-5 pr-md-4` on `main`. – Christopher Nov 09 '21 at 09:05
  • use the css property `border: none` and `outline: none`. This will remove any borders or outlines present in the element – Rithish Nov 09 '21 at 09:05
  • As for the second question – you can only do it if the iframe is pointing to your website (without cross origin). If so, then you should check i.e. this question: https://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript – pwkc Nov 09 '21 at 09:13
  • @pwkc the iframe container can grow/shrink too, it doesn't matter if the content can be displayed or not. Here is an [example](https://jsfiddle.net/anotherCoward/vejdtL3q/). – Christopher Nov 09 '21 at 09:29
  • @Christopher your example doesn't make use of javascript, but how does it then dynamically adjust the height depending on the browser size? I was expecting some kind of js function that would be called whenever a change in browser window size was detected, how exactly does your example work? – dmmpie Nov 09 '21 at 13:45
  • It makes use of flexboxes. JavaScript isn't required there. `Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. ` - You can find out more about them [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). – Christopher Nov 09 '21 at 15:33

0 Answers0