在文档调整大小时调整元素的大小

Resizing an element when the document resizes

本文关键字：调整 元素 小时 文档      更新时间：2023-09-26

我想在文档调整大小时调整元素的大小。如果移动可拖动的div并导致文档滚动。我想调整一个元素的大小，比如$("#page").css('height','120%');。我在div的onresize事件中这样做，这样对吗?有没有别的场合我应该这样做?

这是HTML。

<div id="matting" onresize="resize_page();"> <!-- Begin page matting div --> 
  <div id="page"> <!-- Begin page div --> 
  </div> <!-- End page div --> 
</div> <!-- End page matting div --> 
<script type="text/javascript"> 
    function resize_page() { 
        alert ('resize_page'); 
        $("#page").css('height','120%'); 
    } 
</script>

你需要钩到可拖动的stop回调:

$("#matting" ).resizable({
   stop: function(event, ui) { ...YOUR CODE... }
});

你可以在jQuery中钩子大小事件:http://api.jquery.com/resize/

一个更好的解决方案可能是对可拖动对象进行限制，使其不能移动到边界之外并滚动页面。

我现在明白了，新代码使用了一个插件，允许将resize方法应用于每个元素。

http://jsfiddle.net/P9Ppb/& lt; & lt;调整窗口大小

解决方案是将页面div的高度重置为父div(文档)的滚动高度。

     var page_height = $('#matting')[0].scrollHeight;
     $("#page").css('height',page_height);
相关文章：