Question

我查看了其他各种帖子，但无济于事，我还没有找到我正在寻找的那种解决方案。许多解决方案涉及到人们使用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和它做成，所以我可以每隔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;
}

Answer 1

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

$(window).resize(simplyWidth);

动态更新Float Left Div的宽度

1 个答案: