Question

所以我的页面上有一个div，无论设备大小为209.53px。我想进行一次计算，计算出该屏幕所占的百分比。这样，我可以设置地图/图像来填充屏幕的其余部分。

我尝试使用80％的高度，但我做对了，SASS / SCSS中有什么方法可以实现这一目标？

所以我去：

209.53/(SCREEN HEIGHT IN PIXELS) = PERCENTAGE COVERED
100 - PERCENTAGE COVERED = REMAINING VH

div{
    height: REMAINING VH;
}

Answer 1

您不知道vh的哪个百分比代表css中的固定高度，并由sass / scss中的扩展名表示，但是您可以将固定高度保留为209.53（我建议四舍五入该值，因为css仍会这样做）并使用CSS Calc。那么您的图片将具有以下高度：

height: calc(100vh - 209.53px);

其他解决方案将使用绝对位置和边距顶部。或者更好，使用flex：

.parent {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;

   .fixed-height-element {
        flex: 0 0 209.53px;    
    }

   .image {
        flex: 2;
    }
}

Answer 2

您设置div元素的top和bottom以获得剩余的屏幕高度：

body {
  padding:0;margin:0;
}

#fixed {
  height: 209.53px;
  background-color:green;
  width:100%;
}

#remaining {
  position:absolute;
  top: 209.53px;
  width:100%;
  bottom:0;
  background-color:red;
}

<div id="fixed">this has height 209.53px</div>
<div id="remaining">this has height until screen bottom</div>

SASS是一个预编译器，因此它对屏幕高度的计算无济于事。

SASS使用屏幕高度来计算设置高度div之后的剩余vh

2 个答案: