Задать высоту (положение) блок с помощью 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 и его высота) Позиционирование - любое, флексы, гриды.... |
voraa,
как вариант ...
.extdiv {
width: 20vw;
height: 60vh;
display: flex;
flex-direction: column;
}
.intdiv1 {
width:100%;
}
.intdiv2 {
width:100%;
flex: 0 1 1;
overflow-y: auto;
}
|
Рони, спасибо.
Заставил меня разобраться со своим кодом. Проверил твой вариант на небольшом тестовом примере - работает. Но я же так делал, черт подери. И ни фига не работало. Просто глупость. У меня все это вложено еще в один контейнер, и именно для него были установлены 20vw 60vh. А самому блоку который контейнер flex никаких размеров не задавал. Вот и не работало. |
voraa,
на всякий случай #1 строка 4 с ошибкой Цитата:
|
| Часовой пояс GMT +3, время: 07:57. |