使用變量和百分比值來定位頁面上的項目

Question

比方說，我有一個這樣的元素。

$div1-height: height(icon); 
.div1 { 
    left: 0; 
    top: 25%; 
    height: $div1-height; 
} 

然後我有另一個div在某個地方，我想使用的位置，在數學上把它放在屏幕上。從概念上講，我想這樣做。

.div2 { 
    top: 25% + $div1-height; 
} 

這樣的事情可能嗎？怎麼樣？

Answer 1

25％是在運行時評估的，所以在頁面呈現之前無法計算它。你可以使用calc，但是，像這樣

top: calc(25% + #{$div1-height}); 

但它可能沒有最大的瀏覽器支持。我會考慮重新工作一些其他的CSS，所以你不必使用calc。