SASS использовать высоту экрана для расчета оставшихся VH после установленной высоты div

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

Вы устанавливаете top и bottom вашего элемента div, чтобы получить оставшуюся высоту экрана:

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 - это прекомпилятор, который не может помочь с вычислениями относительно высоты экрана.