如何将 CSS 属性基于另一个不是直接父元素的元素？

Question

例如，我想制作 3 个 div 列，分别为页面宽度 (body) 的 5%、15% 和 25%。

伪代码（HTML）：

<div id="a">
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div>

伪代码（CSS）：

html
{
    height: 100%;
}

body
{
    height: calc(100% - 1em);
}

#a
{
    width: 75%;
    height: 90%;

    background: grey;
}

#b
{
    width: calc(width(body) * 0.05);
    height: 100%;

    background: red;
}

#c
{
    width: calc(width(body) * 0.15);
    height: 100%;

    background: blue;
}

#d
{
    width: calc(width(body) * 0.25);
    height: 100%;

    background: green;
}

我想知道如何在不使用脚本和确定数字（例如100px）的情况下做到这一点，因为有很多答案（是的，我已经尝试Google来获得答案）我看过包括这些。

Answer 1

试试下面

table {
    width: 100%;
    height: 100%;
}
#row1 {
    width: 10%;
}
#row2 {
    width: 30%;
}
#row3 {
    width: 50%;
}

Answer 2

您可以使用 CSS custom properties 或变量来存储 body 的宽度。然后，您可以使用 calc() 来获得 body 宽度的百分比。您可以使用 var(--your-css-variable).

访问您的变量

不幸的是，我认为 vw、绝对单位、，也许 rem 是您可以在 body 上使用的唯一有效单位的宽度。

:root {
    /* CSS variable for body's width */
    --width-body: 100vw;
}

html { height: 100%; }

body { 
    height: calc(100% - 1em); 
    width: var(--width-body);
}

#a {
    width: 75%;
    height: 90%;
    background: grey;
    
    /* Flexbox will give the children div's 
       their full height. */
    display:flex;
}

#b {
    /* 0.05 represents 5% of body's width */
    width: calc(var(--width-body) * 0.05);
    background: red;
}

#c {
    /* 0.15 represents 15% of body's width */
    width: calc(var(--width-body) * 0.15);
    background: blue;
}

#d {
    /* 0.25 represents 25% of body's width */
    width: calc(var(--width-body) * 0.25);
    background: green;
}

<div id="a">
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div>

如何将 CSS 属性基于另一个不是直接父元素的元素？

How do I base a CSS property on another element that isn't the direct parent?

html

css

css-calc

如何将 CSS 属性 基于另一个不是直接父元素的元素？

How do I base a CSS property on another element that isn't the direct parent?

html

css

css-calc

如何将 CSS 属性基于另一个不是直接父元素的元素？