jQuery調整CSS元素的大小

Question

我知道如何使用CSS解決我的問題。我需要從像素到百分比（趣味時間！）設置每個值，其中有1000個值。無論是在事實發生後還是在我走後，這總是很痛苦。我已經能夠更快地設計出避開它的像素，但是現在想要避免它們一起出現。我假設使用CSS百分比（我的整個頁面是一個固定的長寬比，所以每一個元素都需要翻譯成百分比）將是最輕量級的解決方案，但我希望可能有一些jQuery腳本存在，可以調整大小元素？

有一次我想嘗試訪問瀏覽器縮放，但這似乎不可能。這是我另一種方法的最後一拍。如果我無法得到某些工作......我必須將其吸收並將我的所有元素轉換爲百分比（實際上應該有一個工具可以爲您做這件事！）。

任何和所有的幫助表示讚賞。謝謝！

編輯*這裏是一個小提琴描繪了一個簡單的網站結構：http://jsfiddle.net/hkdeA/4/。我包括一些代碼來嘗試擴展外部容器。如果所有內部容器都是CSS百分比，它就可以工作，但我有1000個值需要翻譯，並且調整所有元素的簡單腳本將節省大量的時間，精力和精力。

<div id="container"> 
    <div id="vid"> 

    </div> 
    <div id="sidebar"> 

    </div> 
    <div id="footer"> 

    </div>  
</div> 

#container{ 
    background:grey; 
    width:480px; 
    height:270px; 
    float:left; 
} 

#vid{ 
    background:black; 
    width:320px; 
    height:180px; 
    float:left; 
} 

#sidebar{ 
    background:blue; 
    width:160px; 
    height:180px; 
    float:right; 
} 

#foot{ 
    background:yellow; 
    width:480px; 
    height:90px; 
    float:left; 
} 

終極目標是：讓我的網站的應用程序，以調整到100％的寬度或高度（取決於窗口的縱橫比）的瀏覽器窗口。我知道可以用CSS百分比和腳本來完成包含div的大小。但是，我想用腳本來更改所有div，以避免將每個固定值轉換成百分比的繁瑣操作。

Answer 1

你在找這樣的事嗎？

$('div').each(function(i,v){ 
    if($(v).width() > 0){ 
    $(v).width('auto'); 
    } 
}); 

Answer 2

嘗試這樣：

var list = []; 
var containerW = $("#container").width(); 
var containerH = $("#container").height(); 
$("#container").find("*").each(function(){ 
    var obj = {}; 
    obj.w = $(this).width() * 100/containerW; 
    obj.h = $(this).height() * 100/containerH; 
    obj.el = $(this); 
    list.push(obj); 
}); 


for (var i in list) { 
    var obj = list[i]; 
    obj.el.width(obj.w+'%'); 
    obj.el.height(obj.h+'%'); 
} 


$("#container").width('100%'); 
// if you want height also to be 100% 
$("#container").height('100%'); 

你可以在這裏進行測試：http://jsbin.com/izubed/1/edit