html - iframe not resizing along with it's parent window -

html - iframe not resizing along with it's parent window -

see here: http://jsfiddle.net/5hyve/

<div style="position: fixed; top:0; right:0; width:300px; height: 100%; text-align:justify; overflow:hidden;" class="chat-container"> <iframe id="chat_1" style="width:300px;height:100%;" scrolling="no" frameborder="0" src="http://www.twitch.tv/chat/embed?channel=riotgames&amp;hide_chat=myspace,facebook,twitter&amp;default_chat=jtv"></iframe> </div>

try , resize result quadrant, , you'll see content within iframe not resize based on it's parent's size. not have access code in iframe. there way this, or bound poorly written css within iframe?

it looks using js observe available window size. best come refreshing iframe contents on page resize. here's snippet jquery that.

var iframe = $('#chat_1'), url = iframe.attr('src'); $(window).on('resize',function(){ iframe.attr('src',url); })

you might want utilize debounce plugin http://benalman.com/projects/jquery-throttle-debounce-plugin/ minimize number of refreshes.

update: http://jsfiddle.net/tyyj3/5/ here's illustration snippet.

html css iframe resize