end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

window sizeに合わせてelementをresize

// 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追記

javascript

edit_area_resize: function(){
    var win_height = $(window).height();
    var off = $("#xxxtain_edit_area").offset();
    $("#xxxtain_edit_area").height(win_height - off.top - 20);
},

css

#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>