动态更新Float Left Div的宽度(Dynamically Update Width of Float Left Div)

动态更新Float Left Div的宽度(Dynamically Update Width of Float Left Div)

我查看了其他各种帖子，但无济于事，我还没有找到我正在寻找的那种解决方案。 很多解决方案都涉及到使用CSS的方法，例如修复左右（这不会使其值得浮动和浪费脑力）或者向右倾斜一定量（这也违背了目的我正在尝试做。

我的问题是这样的：我有3个div：包装器，菜单和内容。 包装器用于将背景应用于页面的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并使它，所以我可以每隔.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; }

I've looked through a variety of other posts, and to no avail, I have yet to find the kind of solution I'm looking for. Many solutions involved people using CSS with methods like fixing the right and left (which wouldn't make it worth floating and a waste of brain power) or to word-wrap at a certain amount to the right (which also defeats the purpose of what I'm trying to do.

My problem exists like this: I have 3 divs: wrapper, menu, and content. Wrapper is used to apply a background to 100% of the page, and create extra styling properties to be inherited by other CSS. Menu is for my menu script I coded in JQuery and it takes up 400px of space on the left hand of the screen and descends downwards at 100vh. I may change it to fixed, but it doesn't change the issue. Anyway, content is the rest of the page; let's say the other 80% of it. I have both menu and content floating left and it works just fine. However, until text wraps at the end of the screen, the div goes under (disappears in my case) the screen and no longer viewable.

My solution:

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

Does it work? Of course it works. The only problem is, it isn't dynamic at all! It resizes to the screen once, and you have to refresh the page just to get it to update again. Is there a way to take that JQuery/Javascript and make it so I can just update it every .1 of a second? Would that make the page lag? Or am I doing it wrong.

Also assume that my HTML is spot on, and it needs no corrections. The reason I won't disclose it is because there's too much there for me to post and to not confuse the living crap out of you people.

This is the basic layout of my page:

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

As for my wrapper 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; }

Content CSS:

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

最满意答案

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

$(window).resize(simplyWidth);

listen to resize event and call the same function when the window is resized:

$(window).resize(simplyWidth);