Я использую городской пейзаж для рендеринга графика в div. Мой HTML выглядит следующим образом
<div class='container'>
<div id='inputContainer'></div>
<div id='cy'></div>
</div>
График cytoscape отображается в div с id как 'cy'. Теперь, когда я уменьшаю контейнер div, граф городского пейзажа выходит за пределы контейнера div. Вот мой css
#inputContainer {
height: 20%;
}
#cy {
position: absolute;
height: 75%;
width: 97%;
z-index: 999;
align-content: center;
}
Я попробовал метод flex, чтобы назначить th cy div, оставшуюся высоту
#cy {
position: absolute;
width: 97%;
z-index: 999;
flex: 1;
}
#inputContainer {
height: 20%;
}
.container {
display: flex;
flex-direction: column;
}
При этом график не отображается. Я заметил, что высота div графа равна 0px. Метод cal c также не работает. Не могли бы вы помочь мне, как в основном сделать div с id 'cy', возьмите высоту как оставшуюся высоту в родительском div с классом 'container'. Есть ли способ, когда при запуске события resize я вычисляю высоту div #inputContainer и назначаю высоту div #cy как: (высота div .container) - (высота div #inputContainer)?