SASS использует высоту экрана для расчета оставшегося vh после заданного деления высоты
Итак, у меня на странице есть div, который независимо от размера устройства будет 209.53px. Я хотел бы иметь расчет, который может определить, какой процент экрана это покрывает. Таким образом, я могу установить карту/изображение, чтобы заполнить оставшуюся часть экрана.
Я пытался использовать высоту 80% и т. д., Но я просто не могу понять это правильно, есть ли способ в SASS/SCSS добиться этого?
Так что я бы пошел:
209.53/(SCREEN HEIGHT IN PIXELS) = PERCENTAGE COVERED
100 - PERCENTAGE COVERED = REMAINING VH
div{
height: REMAINING VH;
}
Ответы 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 является прекомпилятором, поэтому он не может помочь с расчетами высоты экрана.
Можно только CSS. Может быть, мой ответ был кратким. Я добавил фрагмент, вам нужно запустить его в полноэкранном режиме
Вы не можете знать, какой процент vh представляет собой фиксированную высоту в css и, соответственно, в sass/scss, но вы можете оставить фиксированную высоту в 209,53 (я бы рекомендовал округлить это значение, так как css все равно сделает это) и использовать css вычисл. Тогда ваше изображение будет иметь следующую высоту:
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;
}
}
Мне очень нравится, в понедельник попробую
Высота css работает отлично. Не знал, что можно использовать разные типы измерений. Ваше здоровье!
Нашел другое решение, чтобы передать его через какой-то javascript. Это не сработало для меня