Question

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

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

这是模态所具有的：

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

设置为73%;的宽度现在可以正常使用，侧边栏始终可见，但是如果侧边栏更改其宽度会发生什么？

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

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

Answer 1

您可以像这样使用calc()（Just css）：

width: calc(100% - 350px);

350px是sideBar的宽度。

如果sideBar的宽度发生变化，则需要获取新宽度，并将350px替换为该新宽度值的变量holdign。

Answer 2

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

setModalSize();

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

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

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

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

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

2 个答案: