Как я могу установить ширину элемента на основе ширины другого элемента?

Question

Я пытаюсь выяснить, как сделать ширину элемента динамической.

У меня есть боковая панель с width: 350px, а затем, когда появляется модальная полная ширина *, эта боковая панель все еще должна бытьvisible.

Вот что имеет модальное значение:

    position: fixed;
    top: 0;
    right: 0;
    z-index: 1050;
    width: 73%;
    height: 100%;
    outline: 0;

При установленной ширине 73%; пока работает, боковая панель всегда видна, но что произойдет, если боковая панель изменитсяего ширина?

Я использую React. Я думаю, это должно быть сделано с помощью JavaScript.

Что я должен сделать, чтобы достичь того, что мне нужно?

Answer 1

Я чувствую, что вам, вероятно, просто нужно получить ширину этой боковой панели, получить ширину всего окна и выполнить простую математическую процедуру, чтобы выяснить, что вам нужно для установки ширины вашего модального окна. Однако вам также необходимо учитывать изменение размера окна. Таким образом, это может быть что-то похожее на это.

setModalSize();

$('window').on('resize', function() {
    setModalSize();
}

function setModalSize() {
    var windowWidth = $('window').width(),
        sidebarWidth = $('#sidebar').css('width');

    $('#modal').css('width', (windowWidth - sidebarWidth));
}

Существует несколько различных способов увеличить ширину элемента. Я включил их в этот пример быстрого кода.

Answer 2

Вы можете использовать calc () (Just css), например:

width: calc(100% - 350px);

Где 350px - ширина боковой панели.

Если ширинаиз изменений sideBar, вам нужно получить новую ширину и заменить 350px на переменную, удерживающую значение этой новой ширины.