动态更新浮动左Div的宽度

Dynamically Update Width of Float Left Div

本文关键字：Div 更新 动态      更新时间：2023-09-26

我已经看了很多其他的帖子，但无济于事，我还没有找到我正在寻找的那种解决方案。许多解决方案涉及人们使用CSS的方法，如固定左右(这不会使它值得浮动，浪费脑力)或在一定数量的右侧换行(这也违背了我想要做的目的)。

我的问题存在如下:我有3个div:包装，菜单和内容。包装器用于将背景应用到页面的100%，并创建由其他CSS继承的额外样式属性。菜单是我的菜单脚本，我在JQuery编码，它占用400px的空间在屏幕的左手，并在100vh向下下降。我可能会把它改成fixed，但这并不能改变问题。总之，内容是页面的其余部分;假设剩下的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每0.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);
}

Menu1 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;
}

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

$(window).resize(simplyWidth);
相关文章：