将元素的宽度（或高度）设置为较高祖先元素的百分比

Question

If I have a DOM structure with three DIVs A, B & C where C is a child of B; and B is a child of A - is there a way to set the width (or height) of C to be a percentage of the width (or height) of A?

PS: jQuery is available, and any jQuery functionality can be used.

Answer 1

那么，在这种情况下，请尝试$('#c').height( $('#c').parent().parent().height() * pct/100 )

Answer 2

If it has to be calculated once only (no resize problems), just fetch the height of A and set the height of C accordingly.

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

Answer 3

Try this

$(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 4

This would work:

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 5

Assuming A's parent has no width defined and A and B can't be width:100% for a much more lightweight and sensible CSS solution:

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

If this is for a real-world problem, it's a bad solution. Never solve layout problems with the JS-hammer.

The following would be ideal.

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

CSS % width requires that an element's parent's width is defined.

Answer 6

Try this:

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

Answer 7

You shouldn't solve layout issues with JavaScipt, since JS can be disabled. That being said...

This code should work even if the window is resized.

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

Answer 8

HTML width supports percentages. I don't see how you'd need to do anything special to make it work.