1

I'm trying to embed an external website into a page of mine with <iframe src="http://...>, I'm setting the width with a simple CSS rule, but I want to set the height equal to the height of the website shown in the iframe, how can I do it?

The website shown is an e-shop, the iframe shows a page with some products, I want that the iframe height grows when the page grows. If the page shown height is 2000px, the iframe height will be 2000px, if the screen width is smaller and the page shown height becomes 3400px, the iframe height will become 3400px, etc...

There is a way to do this?

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
fonzie123
  • 11
  • 2
  • There's an answer already: https://stackoverflow.com/questions/819416/adjust-width-and-height-of-iframe-to-fit-with-content-in-it – Neil Lu Jan 25 '22 at 08:29

3 Answers3

-1

You can achieve this using CSS. Make a ruleset for iframes and adding a declaration: height: 100%

Ethan
  • 881
  • 8
  • 14
  • 26
-1

You can also try this on the ruleset for iframe:

height: 100% !important;
luchuts
  • 39
  • 1
  • 3
  • 1
    Thank you for your answer, but it doesn't work, it sets the iframe's height 100% of the parent div. It is not what i need. I need the iframe to follow the website in it. – fonzie123 Jul 08 '22 at 17:28
-1

you can use vh unit:

height: 100vh;
Mohammed Chaker
  • 9
  • 1