动态更新浮动左Div的宽度

我已经浏览了各种其他帖子，并且无济于事，我还没有找到我正在寻找的那种解决方案。许多解决方案都涉及到人们使用CSS的方法，比如固定左右方向（这不会使它值得浮动和浪费大脑的力量），或者在一定程度上向正确的方向进行文字包装（这也违背了什么我试图做动态更新浮动左Div的宽度

我的问题像这样存在：我有3个div：包装，菜单和内容Wrapper用于将背景应用到100％的页面，并创建额外的样式属性以被其他CSS继承菜单是我用JQuery编写的菜单脚本，它在屏幕左边占用400px的空间，在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成为可能，所以我可以每秒更新一次。这会使页面滞后吗？或者我做错了。

此外，假设我的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; 
}

来源

2014-07-11 Christopher ' Solidus' DeJong

'$（窗口）.resize（）'？ :) –

听时，窗口大小调整大小事件并调用相同的功能：

$(window).resize(simplyWidth);

来源

2014-07-11 15:46:03 keune

谢谢，它没有奏效，因为我很困惑为什么没有出现。我停下来想了一会儿，意识到这是因为脚本在等待浏览器更改大小，然后才真正设置#content的宽度。我的更新代码如下所示： 'simplyWidth（'＃content'，'＃menu1'，'＃wrapper'）; （window）.resize（function（）{simplyWidth（'＃content'，'＃menu1'，'＃wrapper'）}）;' 谢谢你的帮助。 –

动态更新浮动左Div的宽度

回答

相关问题