Question

如果我的DOM结构有三个DIV A，B＆amp; C其中C是B的孩子;和B是A的孩子 - 有没有办法将C的宽度（或高度）设置为A的宽度（或高度）的百分比？

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

Answer 1

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

Answer 2

如果必须只计算一次（没有调整大小问题），只需获取A的高度并相应地设置C的高度。

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

Answer 3

试试这个

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

这样可行：

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

假设A的父级没有定义宽度，A和B不能是宽度：100％，以获得更轻量级和更敏感的CSS解决方案：

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

如果这是针对现实世界的问题，那么这是一个糟糕的解决方案。永远不要用JS-hammer解决布局问题。

以下是理想的。

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

CSS％width要求定义元素的父宽度。

Answer 6

试试这个：

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

Answer 7

您不应该使用JavaScript解决布局问题，因为可以禁用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

Answer 8

HTML width支持百分比。我不知道你需要做些什么特别的事情来使它发挥作用。

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

8 个答案: