Make iframe 100% height on blogger website-CodePudding

I have a blogspot website (blogger.com) and i created a new page to embeds outside URL to my blog using html iframe when i set width:100%; to the iframe it works fine and the frame take the 100% of width my problem with height i want to make iframe height 100% and the iframe can change the height of the page depends on content when user browsing. i tried a lot of solutions on the internet and it all didn't work with me here is the link for the page: https://fortestonly5.blogspot.com/2022/07/blog-post.html

<style>
.container {
height:100%;
}

.item {
    height: 100%;
    width: 100%;
}
</style>

<div >
  <iframe  scrolling="no" src="https://motatwer.website/show-compare?first_phone=53&seconde_phone=2" >
</iframe>
</div>

CodePudding user response：

The container of the iframe must have a position other than static. Give it a position of absolute or relative and try again.

CodePudding user response：

I tried your code and added a line in your item css

.item {
        height: 100%;
        width: 100%;
        position: absolute;
    }

It's working that you want.