爲什麼下面的`сss`構造無效？

Question

我想使用calc函數，但它太簡單了。

#data { 
 
    background: #333333; 
 
    float: left; 
 
    width: 70%; 
 
    height: calc(data.width/4)px; 
 
    margin-top: 3%; 
 
    border-radius: 10px; 
 
    border: 0px solid #333333; 
 
}

Answer 1

我明白你想要的高度爲1/4的寬度。

這應該做你想要什麼：

#data{ 
 
    background-color:blue; 
 
    width: 100%; 
 
    height: 25vw; 
 
}

<div id="data"></div>

Answer 2

它不起作用，因爲data.width不可用，則可以使用，無論變量來實現你想要什麼。

#container { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
#data{ 
 
    --width: 70%; 
 
    background-color:blue; 
 
    width: var(--width); 
 
    height: calc(var(--width)/4); 
 
}

<div id="container"> 
 
    <div id="data"></div> 
 
</div>

Answer 3

不幸的是，CSS目前不允許使用在計算元素的實際尺寸。 calc() function僅允許具有相同類型的已知值的操作（例如以不同長度單位表示的長度）。

爲了與不斷的比例元素（如代碼暗示），您可以：

1. 使用視相對單位，例如

#data { 
 
    background: #333333; 
 
    float: left; 
 
    width: 70vw; 
 
    /* note the white spaces around "/" and no extra units */ 
 
    height: calc(70vw/4); 
 
    /* or just height: 17.5vw; */ 
 
    margin-top: 3%; 
 
    border-radius: 10px; 
 
    border: 0px solid #333333; 
 
}

<div id="data"></div>

使用the padding hack（在這種情況下，您需要爲您的div內容絕對位置）：

#data { 
 
    background: #333333; 
 
    float: left; 
 
    width: 70vw; 
 
    height: 0; 
 
    padding-top: calc(70vw/4); 
 
    margin-top: 3%; 
 
    border-radius: 10px; 
 
    border: 0px solid #333333; 
 
    position: relative; 
 
}

<div id="data"></div>