Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Задать высоту (положение) блок с помощью CSS (https://javascript.ru/forum/xhtml-html-css/81630-zadat-vysotu-polozhenie-blok-s-pomoshhyu-css.html)

voraa 29.12.2020 22:27

Задать высоту (положение) блок с помощью CSS
 
С CSS я не на ты.
Может, кто поможет.
Задачка на первый взгляд простая.
<style>
.extdiv {
    width: 20vw;
    heigth: 60vh;
}
.intdiv1 {
    width:100%;
}
.intdiv2 {
    width:100%;
    overflow-y: auto;
}
</style>

<div class="extdiv">
    <div class="intdiv1">
       Немного бла-бла-бла
    </div>

    <div class="intdiv2">
       Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
    </div>
</div>


Див extdiv имеет вполне определенные, но не постоянные размеры (20vw 60vh)
Поэтому могут непредсказуемо меняться. К тому же эти 20 и 60 тоже могут меняться в зависимости от
media в CSS
Высота intdiv1 определяется содержимом. Может меняться, но заведомо небольшая (<40%)
Необходимо, что бы intdiv2 начинался сразу за intdiv1 и заканчивался в конце extdiv.
Нужно с помощью CSS (С JS замотаешься ловить в какой момент меняется содержимое intdiv1 и его высота) Позиционирование - любое, флексы, гриды....

рони 29.12.2020 22:44

voraa,
как вариант ...
.extdiv {
    width: 20vw;
    height: 60vh;
    display: flex;
    flex-direction: column;
}
.intdiv1 {
    width:100%;
}
.intdiv2 {
    width:100%;
    flex: 0 1 1;
    overflow-y: auto;
}

voraa 29.12.2020 23:30

Рони, спасибо.
Заставил меня разобраться со своим кодом.
Проверил твой вариант на небольшом тестовом примере - работает.
Но я же так делал, черт подери. И ни фига не работало.

Просто глупость.
У меня все это вложено еще в один контейнер, и именно для него были установлены 20vw 60vh. А самому блоку который контейнер flex никаких размеров не задавал. Вот и не работало.

рони 29.12.2020 23:45

voraa,
на всякий случай #1 строка 4 с ошибкой
Цитата:

Сообщение от voraa
heigth



Часовой пояс GMT +3, время: 21:06.