Making iframe dynamically fill page...

User 2767589 Photo


Registered User
1 post

Me: I have a basic understanding of coding and html but not much proficiency (I generally hack around based on googling until it works OK)

Website: A nav bar up top (maybe 10-20% of screen height) and a map in an iframe at the bottom that fills the remaining height. Needs to be dynamic so the map is filling as much screen space as possible on the device. I'm using the Aplha Pro-Responsive theme since that's closest to the simplicity I want.

Problem: I add the frame with 100% height but it comes up as a sliver. If I change the height to a pixel value it works fine but of course it's not dynamic.
<iframe width='100%' height='100%' src='blah blah' frameborder='0' scrolling='no'></iframe>

Is my problem in the html of my page, css, or both? Any info on where to start digging would be helpful! Site is not on a server, here are some screen shots first with height as 100% then as 500px

https://lh4.googleusercontent.com/-k02cjn1VtRk/VRanH8DOnTI/AAAAAAAAGbw/Xlbq1aDZlKA/s640/h100pct.jpg

https://lh5.googleusercontent.com/-M_HQHAfZPEI/VRanH0OL_FI/AAAAAAAAGb0/xg21C_5JaTI/s640/h500px.jpg
User 187934 Photo


Senior Advisor
20,181 posts

Give this a try.
https://github.com/davidjbradshaw/iframe-resizer
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.