Установка свойства max-height и min-height в CSS (или через jQuery)

Question

У меня простая, но раздражающая проблема. Мне нужно установить min-height И max-height элемента div.

Например: min-height: 100px и max-height: 200px. Я загружаю свою страницу с высотой div 200px. Если я сожму окно моего браузера, этот div изменит размер, и когда он достигнет height=100px, он прекратит изменение размера.

Конечно min-height и max-height в CSS не работают. : /

Любой

Спасибо.

Answer 1

Также установите высота .

min-height: 100px;
max-height: 200px;
height: 100%;

Answer 2

Минимальная высота всегда переписывает высоту и максимальную высоту, поэтому вы не можете просто использовать оба.

Это что-то вроде хака, но вы можете сделать это с помощью медиа-запросов. Если это ваш HTML:

<div id="myDiv"></div>

Затем добавьте это к вашему CSS:

#myDiv{
    height:200px;    
}
@media screen and (max-height: 200px) {
    #myDiv {
        height:99vh; /*Set this with trial and error because it depends on your margins*/
    }
}
@media screen and (max-height: 100px) {
    #myDiv {
        height:100px;
    }
}

Answer 3

Попробуйте

min-height: 100px;
max-height: 200px;
height: 100vh;