javascript - 动态更新 Float Left Div 的宽度

Question

我浏览了各种其他帖子，但无济于事，我还没有找到我正在寻找的解决方案。许多解决方案涉及人们使用 CSS 等方法来固定左右(这不值得 float 和浪费脑力)或在一定数量的右侧换行(这也违背了什么的目的我正在尝试做。

我的问题是这样的:我有 3 个 div:包装器、菜单和内容。 Wrapper 用于将背景应用到 100% 的页面，并创建额外的样式属性以供其他 CSS 继承。菜单是我用 JQuery 编写的菜单脚本，它占用屏幕左侧 400 像素的空间，并以 100vh 向下下降。我可能会将其更改为已修复，但不会改变问题。无论如何，内容就是页面的其余部分；让我们说它的其他80％。我的菜单和内容都向左浮动，效果很好。但是，直到文本在屏幕末尾换行，div 才进入屏幕下方(在我的例子中消失)并且不再可见。

我的解决方案:

function simplyWidth(changed, menu1, wrapper){
    var wrapperWidth = $(wrapper).width();
    var menuWidth = $(menu1).width();
    var newWidth = wrapperWidth - menuWidth;

    $(changed).css("width", newWidth);

};

有用吗？当然有效。唯一的问题是，它根本不是动态的!它会根据屏幕大小调整一次，您必须刷新页面才能再次更新。有没有一种方法可以获取 JQuery/Javascript 并使其成为我可以每 .1 秒更新一次？那会使页面滞后吗？还是我做错了。

同时假设我的 HTML 正确无误，无需更正。我不会透露它的原因是因为我要发布的东西太多了，以免混淆你们这些活生生的废话。

这是我页面的基本布局:

<div id="wrapper">

<div id="menu1"></div>
<div id="content"></div>

</div>

至于我的包装器 CSS:

#wrapper {
    width: 100%;
    background-color:black;
    margin: 0 auto;
    top: 0px;
    overflow:hidden;
    height: 100vh;
    background-image:url(Assets/background1.jpg);
}

菜单 1 CSS:

#menu1 {
    margin: 0 auto;
    height: 100%;
    width: 400px;
    background-color:#191919;
    color:white;
    z-index: 400;
    float: left;

}

内容 CSS:

#content {
    float:left;
    color:white;
    height: 100vh;
}

Answer 1

监听调整大小事件并在调整窗口大小时调用相同的函数:

$(window).resize(simplyWidth);