Fatal编程技术网
  • css/
  • Css 使用变量和百分比值在页面上定位项目

Css 使用变量和百分比值在页面上定位项目

css sass

Css 使用变量和百分比值在页面上定位项目,css,sass,Css,Sass,假设我有这样一个元素 $div1-height: height(icon); .div1 { left: 0; top: 25%; height: $div1-height; } 然后我在某处有另一个div，我想用这个位置在屏幕上对它进行数学定位。从概念上讲，我想这样做 .div2 { top: 25% + $div1-height; } 这可能吗？如何计算？25%是在运行时计算的，因此在呈现页面之前无法计算它。你可以像这样使用calc top: calc(25% + #{

假设我有这样一个元素

$div1-height: height(icon);
.div1 {
  left: 0;
  top: 25%;
  height: $div1-height; 
}
然后我在某处有另一个div，我想用这个位置在屏幕上对它进行数学定位。从概念上讲，我想这样做

.div2 {
  top: 25% + $div1-height;
}
这可能吗？如何计算？

25%是在运行时计算的，因此在呈现页面之前无法计算它。你可以像这样使用calc

top: calc(25% + #{$div1-height});
但它可能没有最好的浏览器支持。我会考虑重新使用你的其他CSS，所以你不必使用Cal.

它不支持什么地方？72.94%. 主要的症结在于ie8和更老的android；当我使用
top:calc（25%+10px），它工作得很好。但当我做
top时：calc（25%+$var）它将显示“无效属性值”。我在一个名为val的CSS规则中记录了$var的值，结果是121px。发生什么事？。您需要像calc一样使用它（100%+{$var}）