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

【问题标题】：How can I set the width of an element based on the width of another element?如何根据另一个元素的宽度设置元素的宽度？
【发布时间】：2020-02-15 15:55:49
【问题描述】：

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

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

这是模态的：

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

设置为73%;的宽度现在可以工作了，侧边栏总是可见的，但是如果侧边栏改变它的宽度会发生什么？

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

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

【问题讨论】：

sideBar 的宽度如何变化？它可以调整大小吗？
不是侧边栏总宽度的 73% 吗？如果侧边栏宽度发生变化，它将是侧边栏新宽度的 73%。

标签： javascript css reactjs ecmascript-6

【解决方案1】：

你可以使用calc()（只是css）喜欢：

width: calc(100% - 350px);

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

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

【讨论】：

【解决方案2】：

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

setModalSize();

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

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

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

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

【讨论】：