Size element from grandparent

Andrew Poulos

unread,

Jun 27, 2021, 1:52:13 AM6/27/21

to

Is there a way to set the width and height of an element with respect to
a great grandparent (or higher) element?

The HTML looks a bit like this:

<body>
<div id="great-grandparent">
<div></div>

<div>
<div>
<div id="one"></div>
</div>
</div>
</div>
</body>

Set the size of "one" with respect to "great-grandparent".

Andrew Poulos

😉 Good Guy 😉

unread,

Jun 27, 2021, 2:09:27 PM6/27/21

to

On 27/06/2021 06:52, Andrew Poulos wrote:

Set the size of "one" with respect to "great-grandparent".

Just give it a size in percentage and see what happens.

        div#one {
            width: 50%;
            height: 20vh;
            background-color: tomato;
        }

--

With over 1.3 billion devices now running Windows 10, customer satisfaction is higher than any previous version of windows.

Andrew Poulos

unread,

Jun 27, 2021, 8:17:12 PM6/27/21

to

On 28/06/2021 4:09 am, 😉 Good Guy 😉 wrote:
> On 27/06/2021 06:52, Andrew Poulos wrote:
>>
>> Set the size of "one" with respect to "great-grandparent".
>>
>
> Just give it a size in percentage and see what happens.
>
>>         div#one {
>>             width: 50%;
>>             height: 20vh;
>>             background-color: tomato;
>>         }

First, doing it that way means the width is set with respect to its
parent and not it's great grand parent. Secondly, using vh for height
bears no relation to the size of the parents(s).

Andrew Poulos

Philip Herlihy

unread,

Jun 28, 2021, 5:58:15 AM6/28/21

to

In article <5YmdnYBYXcWfiET9...@westnet.com.au>,
ap_...@hotmail.com says...

What you're looking for is "container queries". On the way, but not
implemented yet in any mainstream browser version.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
https://css-tricks.com/say-hello-to-css-container-queries/
https://caniuse.com/css-container-queries -- NB!

--

Phil, London

Dr....@nyc.rr.com

unread,

Jun 28, 2021, 2:58:53 PM6/28/21

to

On Sun, 27 Jun 2021 15:52:06 +1000, Andrew Poulos <ap_...@hotmail.com>
wrote in <hfCdnXjhAsaaj0X9...@westnet.com.au>:

If the grand-parent's width has been set, then

var w = document.getElementById('great-grandparent').style.width ;
var w1 = Number( w.replace(/[^\d]/g, "") ) ; //size
var w2 = w.replace(/\d/g, "") ; //unit
document.getElementById('one').style.width = (w1) * adjustment +w2;

If grand-parent's width has NOT been set, then create an invisible element
with the wanted width inside and use that which does require all the above
fussing.

Similarly for height.

K

--
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

Dr....@nyc.rr.com

unread,

Jun 28, 2021, 3:18:03 PM6/28/21

to

On Sun, 27 Jun 2021 15:52:06 +1000, Andrew Poulos <ap_...@hotmail.com>
wrote in <hfCdnXjhAsaaj0X9...@westnet.com.au>:

Corrected --

If the grand-parent's width has been set, then

var w = document.getElementById('great-grandparent').style.width ;
var w1 = Number( w.replace(/[^\d]/g, "") ) ; //size
var w2 = w.replace(/\d/g, "") ; //unit
document.getElementById('one').style.width = (w1) * adjustment +w2;

If grand-parent's width has NOT been set, then create an invisible element

with the wanted width inside and use that which does not require all the
above fussing.

The width unit must be physical rather than percentage.

😉 Good Guy 😉

unread,

Jun 28, 2021, 3:35:14 PM6/28/21

to

On 28/06/2021 01:17, Andrew Poulos wrote:

First, doing it that way means the width is set with respect to its parent and not it's great grand parent. Secondly, using vh for height bears no relation to the size of the parents(s).

This one should work. Try it (change the height to pixels if that is what you want):

#great-grandparent div#one {

            width: 50%;
            height: 20vh;
            background-color: tomato;
        }

You could also play with div:nth-child(?) but it can get tricky with nested divs unless all the divs have either classes or ids

Dr....@nyc.rr.com

unread,

Jun 29, 2021, 6:34:52 AM6/29/21

to

On Mon, 28 Jun 2021 15:17:59 -0400, Dr....@nyc.rr.com wrote in
<828kdgpg878pnqurt...@4ax.com>:

An even better way is to use getComputedStyle.

Assuming that the unit is two characters (probably px) then

var w = getComputedStyle ( document.getElementById('great-grandparent') ).
getPropertyValue('width') ;
document.getElementById('one').style.width =
Number(w.substr(0,w.length-2)) * adjustment + w.substr(-2) ;

which avoids two replaces using regexps. The number function is probably
redundant.

Thomas 'PointedEars' Lahn

unread,

Jul 1, 2021, 2:04:18 PM7/1/21

to

With standard CSS, an element with “position: absolute” will be sized based
on the next ancestor with a “position” value other than “static”, or the
viewport in the absence of such an ancestor. This applies at least to the
properties “left”, “top”, “right”, “bottom”, “width”, and “height”. The
“width” and “height” properties do not include the padding, though (except
in MSHTML < 7).

It can, of course, also be solved with scripting.

However, you may be attempting to solve the wrong problem.

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.