设置元素的宽度(或高度)为较高祖先元素的百分比

Set width (or height) of element as percentage of higher ancestor element

本文关键字：元素 高祖先 祖先 百分比 高度 设置      更新时间：2023-09-26

如果我有一个包含三个div的DOM结构a, B &C，其中C是B的子结点;B是a的子元素-是否有一种方法可以将C的宽度(或高度)设置为a的宽度(或高度)的百分比?

PS: jQuery是可用的，jQuery的任何功能都可以使用

这样的话，试试$('#c').height( $('#c').parent().parent().height() * pct/100 )

如果只需要计算一次(没有大小调整问题)，只需获取A的高度并相应地设置C的高度

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

试试这个

$(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
});

这样可以:

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%

假设A的父元素没有定义宽度，并且A和B不能为width:100%，以获得更轻量级和更明智的CSS解决方案:

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

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

下面的语句比较理想。

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

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

试试这个:

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

你不应该用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

HTML width支持百分比。我看不出你需要做什么特别的事情来使它工作

相关文章：