iFrame Element的问题没有在容器内重新调整大小

Question

I am working on a small VA project and I am attempting to pull stats from another website. The only way I have been able to find out how to do this, is by using an iFrame with the clip function.

Website is: NWGlobalVA.com

Now the Issue I am having is if you go to the main page and re-size the browser in anyway it pushes behind the map element. I have tried everything in my knowledge and research to make it re-size with the container.

Below is the code I use with the iFrame and CSS to do the clipping. Any help would be much more appreciated then you will understand. I have been trying to do this for a couple days now. Ideally I would rather just get the information once every 15 minutes and pass it to my database. However on the website none of the tables are defined and I would know how to go about that.

<style>   
.iframeb {   
    position: absolute;   
    left:-384px;   
    right:0px;   
    top: -145px;   
    clip: rect(190px, 625px, 350px, 400px);   
}</style> 


<iframe width="890" height="1900" src="http://fscloud-infotool.de/index.php?page=vasystem&subpage=vadetails&id=10277" class="iframeb" scrolling="no" frameborder="0"></iframe>

Answer 1

The way I deal with iframe size is with javascript (jquery):

I calculated the original iframe aspect ratio by taking the width/height. So in your case: 890/1900.

<script>
function size_iFrame()
{
    // If the width and height of the iframe are set 
    // as attributes (<iframe width='890' height='1900'>), 
    // you can have the js calculate it for you.
    // aspect= $('iframe').attr('width') / $('iframe').attr('height');
    aspect= 0.47; 
    $('iframe').css('width', '100%');
    $('iframe').css('height', $('iframe').width() / aspect);
}
$(document).ready(function()
{
    size_iFrame();
    $(window).resize(function()
    {
        size_iFrame();
    });
}
</script>

This will fit the iframe to the width of its container and give it the same aspect ratio as it initially had.

Edit: To answer your question, i'd call it from the ready callback and setup and window resize callback to call every time the screen size changes. I edited my code above to show this.

Edit2: As @mugé points out, you'll also need to remove your iframe css styling for my method to work.

Answer 2

In responsive design, I assign the iframe a container sized inside the CSS. For example,

CSS
.iframe_container {
display: inline;
float: left;
width: 89%; //whatever width you want }

You will need to eliminate your .iframeb absolute, right, left positionings, because the container will take care of it all, unless you are talking about the 'List' parameters on top of the map, I would try to use @media to arrange clean lists according to screen sizes for the .iframeb class.