如何根据另一个元素的宽度设置元素的宽度？

Question

我试图弄清楚如何使元素的宽度动态化。

我有一个width: 350px的侧边栏，然后当一个全宽模式出现时，该侧边栏应该仍然可见。

这是模态的：

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

宽度设置为73%; 它现在有效，侧边栏始终可见，但如果侧边栏改变其宽度会发生什么？

我正在使用反应。 我想这应该用 JavaScript 来完成。

我应该怎么做才能达到我的需要？

Answer 1

您可以使用calc() （只是 css ），如：

width: calc(100% - 350px);

其中350px是侧边栏的宽度。

如果侧边栏的宽度发生变化，您需要获取新宽度并将350px替换为变量 holdign 新宽度的值。

Answer 2

我觉得您可能只需要获取该侧边栏的宽度，获取整体 window 的宽度，然后做一些简单的数学运算来确定您需要将模态的宽度设置为什么。 但是，您还需要考虑 window 调整大小。 因此，它可能与此类似。

setModalSize();

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

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

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

有几种不同的方法来拉元素的宽度。 我已将它们包含在此快速代码示例中。