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

如果我有一个带有三个DIV A的DOM结构B & C其中C是B的子元素;而B是A的孩子 - 有没有办法将C的宽度（或高度）设置为A的宽度（或高度）的百分比？将元素的宽度（或高度）设置为较高祖先元素的百分比

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

2011-08-29 Deepak Prakash

如果你可以更具体地了解你的html（发布它可能？），你会得到更好的答案。我认为一般的答案是不适用于CSS，但根据您的确切情况，可能会有一些解决方法。我相信它可以在jQuery中完成，但很难说没有更多的细节（所有3 div divs百分比宽度等） –

-1

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

来源

2011-08-29 19:54:08 Halcyon

该宽度是父元素的百分比。他想将其定义为父母父母的百分比。 –

...会通过CSS设置B的宽度为'100％'没有完成那个目标，那么？继承是一件有力的事情。 – 2011-08-29 20:02:43

马特是正确的。如果你*不需要那么显然你有元素不遵循通常的流*你应该重新考虑你的HTML结构，或者只是使用JavaScript。 – Halcyon

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

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

来源

2011-08-29 19:54:09 pimvdb

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

来源

2011-08-29 19:54:42 Blazemonger

试试这个

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

来源

2011-08-29 19:55:36 ShankarSangoli

这会工作：

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%

来源

2011-08-29 19:55:56 Joe

假设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要求定义元素的父宽度。

来源

2011-08-29 20:10:54

试试这个：

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

来源

2011-08-29 20:11:29 tenshimsm

你不应该解决布局问题与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

来源

2011-08-29 20:15:30 ThatMatthew

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

回答

相关问题