如何動態調整div大小？

我發現了一些關於動態地對divs做些什麼的答案，但是他們沒有做到我想要的。我與Raphael JS矢量庫工作，需要在物體將要繪製的帆布一個div。例如：如何動態調整div大小？

<html> 
    <head> 
     <style> 
      #canvas 
      { 
       height: 2000px; 
       position: absolute; 
       width: 1500px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas"></div> 
     <!-- some code here --> 
    </body> 
</html>

在我的JS文件我做了以下內容：

var paper = Raphael("canvas"), 
    r = paper.rect(100, 100, 100, 100), 
    c = paper.circle(500, 500, 80);

現在在我的應用程序，用戶將通過創建對象來填充的canvas像r和c我上面顯示。但問題是，一旦一個對象被創建在畫布尺寸之外，它就不會顯示在紙張/畫布上。

我試圖動態放大div的大小即高度：3000px，寬：2000像素。我發現了一些關於absolute position的答案，但是沒有幫助。還發現約div overflow，但這適用於div的父元素。任何幫助將不勝感激。

來源

2013-05-30 Brian

你需要做的是調整既包含div和紙張。在這個例子中，我會顯示你的圓圈右下角。

當您單擊畫布，它會調整，以顯示你的圈子繪製正確。

見http://jsfiddle.net/kRzx5/7/

var paper = Raphael("canvas"), 
r = paper.rect(100, 100, 100, 100), 
c = paper.circle(500, 500, 80); 

// size i want to resize to 
var w = 1000; 
var h = 1000; 

var canvas = $('#canvas'); 
canvas.on('click', function(){ 
    // resize container 
    $(this).css({width: w, height: h}); 

    // resize paper 
    paper.setSize(w, h); 
});

在這個例子中，我使用任意大小的使用，你可以繼續檢查被添加的每個對象的位置和大小，並找到這對X值最大的項目和y時檢查它的邊界框，然後調整到這個。因此，紙張將始終適合添加的項目。

來源

2013-05-30 21:32:53 Neil

哦，你並不真正需要的位置是：絕對的，我留在你已有的的jsfiddle例子。 – Neil

如何動態調整div大小？

回答

相關問題