// window sizeにあわせたelement高さ変更(一番下にあるelementであること前提) function changeHeight(id){ var obj = document.all && document.all(id) || document.getElementById && document.getElementById(id); if(obj){ clientSize=getWindowClientSize(); var newHeight=(clientSize.height - getTop(obj) - 20); if (newHeight > 120) { //必ず残す高さをここで指定 obj.style.height=""+(newHeight)+"px"; } } } function getWindowClientSize(){ var result={"width":0,"height":0}; if(window.self&&self.innerWidth){ result.width=self.innerWidth; result.height=self.innerHeight; }else if(document.documentElement && document.documentElement.clientHeight){ result.width=document.documentElement.clientWidth; result.height=document.documentElement.clientHeight; }else{ result.width=document.body.clientWidth; result.height=document.body.clientHeight; } return result; } function getTop(obj){ var px = 0; while(obj){ px += obj.offsetTop; obj = obj.offsetParent; } return px; }
<iframe id="preview_container" src="http://www.google.co.jp"> この部分は iframe 対応のブラウザでご覧下さい。 </iframe> <script> window.onresize = function(){ changeHeight('preview_container'); }; window.onload = function(){ changeHeight('preview_container'); }; </script> </body> </html>
最近は次のように書いてます 2012-10-2追記
edit_area_resize: function(){ var win_height = $(window).height(); var off = $("#xxxtain_edit_area").offset(); $("#xxxtain_edit_area").height(win_height - off.top - 20); },
#xxxtain_edit_area { overflow-y: scroll; border: 1px solid #999999; }
html(init script)
<script> $(document).ready(function(){ xxxtain.edit_area_resize(); $(window).bind("resize",function(e){ xxxtain.edit_area_resize(); }); }); </script>