將元素的寬度（或高度）設置爲較高祖先元素的百分比

Question

如果我有一個帶有三個DIV A的DOM結構B & C其中C是B的子元素;而B是A的孩子 - 有沒有辦法將C的寬度（或高度）設置爲A的寬度（或高度）的百分比？

PS：jQuery可用，並且可以使用任何jQuery功能。

Answer 1

HTML width支持百分比。我不明白你需要做什麼特殊的事情才能使它工作。

Answer 2

如果必須只計算一次（不調整大小問題），只需獲取A的高度並相應地設置C的高度。

var heightA = $('#divA').height(); 
var heightC = heightA * 0.50; // 50% 
$('#divC').height(heightC); 

Answer 3

那麼，在這種情況下，嘗試$('#c').height($('#c').parent().parent().height() * pct/100)

Answer 4

試試這個

$(function(){ 
    var height = $("#A").height(); 
    var width = $("#A").width(); 
    $("#c") 
    .width(width * 0.10);//10%, you can set whatever percent you need 
    .height(height * 0.10);//10%, you can set whatever percent you need 
}); 

Answer 5

這會工作：

var height_A = $('#div_A').height(); 
var width_A = $('#div_a').width(); 
$('#div_C').height(height_A*0.30); // for 30% 
$('#div_C')width(width_A*0.30); // for 30% 

Answer 6

假設A的父母有沒有定義的寬度和A和B不能是寬度：100％的更輕量級和敏感的CSS解決方案：

$('#divC').height($('#divA').height() * (percentage/100)); 

如果這是針對現實世界的問題，這是一個不好的解決方案。永遠不要用JS錘子解決佈局問題。

以下將是理想的。

#parent_of_a { width:<anything>; } 
#a, #b { width:100%; } 
#c { width:<whatever>% }; 

CSS％width要求定義元素​​的父寬度。

Answer 7

試試這個：

$(function(){ 
    var aheight = $("#a").height(); 
    var awidth = $("#a").width(); 
    $("#c").width(awidth * 0.50).height(aheight * 0.50); 
}); 

Answer 8

你不應該解決佈局問題與javascipt的，因爲JS可以禁用。這是說...

即使窗口調整大小，此代碼應該工作。

function setDimension() { 
    var containerWidth = $('#divC').parent().parent().width(); 
    $('#divC').width(containerWidth * 0.5); 
} 

$(setDimension); // do it on initial load 
$(window).resize(setDimension); // do it when window is resized