Javascript CSS JS固定位置边栏

我有两个街区——一个固定位置，另一个紧挨着它。我希望固定块在单击按钮后增加长度，第二个块减小大小并再次单击所有内容以将其恢复到原始状态。固定块将是侧栏菜单，永久粘贴

每件事都应该以100%的宽度发生

如何做到这一点，但重要的是，固定块和固定块的宽度应以像素为单位指定，而不是以百分比为单位

要这样做吗

jQuery（文档）.ready（函数（$）{
jQuery（“.btn”）。单击（函数（）{
var div1=jQuery（“.left”）；
var div2=jQuery（“.right”）；
if（div1.width（）<200）{
第1部分：动画制作({
宽度：“25%”
}, {
持续时间：200，
特别租赁：{
宽度：“线性”
}
});
第2部分：动画制作({
宽度：“75%。”
}, {
持续时间：200，
特别租赁：{
宽度：“线性”
}
});
}否则{
第1部分：动画制作({
宽度：“5%”
}, {
持续时间：200，
特别租赁：{
宽度：“线性”
}
});
第2部分：动画制作({
宽度：“95%。”
}, {
持续时间：200，
特别租赁：{
宽度：“线性”
}
});
}
});
});
.container{
宽度：100%；
保证金：0自动；
}
.左{
浮动：左；
位置：固定；
宽度：5%；
身高：100%；
背景：粉红色；
z指数：5；
}
.对{
浮动：对；
位置：相对位置；
宽度：95%；
高度：300px；
背景：绿色；
}
.内容{
浮动：左；
位置：相对位置；
宽度：100%；
高度：100px；
背景：银；
}

abc

每件事都应该以100%的宽度发生

。。。以像素为单位，而不是以百分比为单位

你确定不是相反吗？更好的方法是尝试使您的css基于
%
而不是
px
或
rem
（除非需要在
px
中执行）

在任何情况下，我都修复了您的代码，但是在
%
中，从现在起，如果需要，您可以使用px：


jQuery（文档）.ready（函数（$）{
jQuery（“.btn”）。单击（函数（）{
var leftDiv=jQuery（“.left”）；
var rightDiv=jQuery（“.right”）；
log（“leftDiv width:+leftDiv.width（）+
-“+”rightDiv宽度：“+rightDiv.width（））
var minWidthForRight=$（'.container'）.width（）-300；
var maxWidthForRight=$（'.container'）.width（）-100；
if（leftDiv.width（）<200）{
leftDiv.animate({
宽度：“300px”，
}, {
持续时间：200，
特别租赁：{
宽度：“线性”
}
});
动画({
宽度：minWidthForRight
}, {
持续时间：200，
特别租赁：{
宽度：“线性”
}
});
}否则{
leftDiv.animate({
宽度：“100px”
}, {
持续时间：200，
特别租赁：{
宽度：“线性”
}
});
动画({
宽度：maxWidthForRight
}, {
持续时间：200，
特别租赁：{
宽度：“线性”
}
});
}
});
});
.container{
宽度：100%；
保证金：0自动；
}
.左{
浮动：左；
位置：固定；
宽度：150px；
高度：300px；
背景：粉红色；
z指数：5；
}
.对{
浮动：对；
位置：相对位置；
宽度：95%；
高度：300px；
背景：绿色；
调整大小：水平；
}
.内容{
浮动：左；
位置：相对位置；
宽度：100%；
高度：100px；
背景：银；
}

abc
如果要定义宽度设置为像素的两个元素，则容器的总宽度不应为100%。容器应该是任意时间两个元素的宽度（以像素为单位）之和。如果你想使用100%的宽度，你必须对两个元素中的至少一个使用百分比。您可以将固定块的扩展宽度设置为
width:300px
，然后对另一个块使用calc
width:calc（100%-300px）
您的代码似乎正在做您想要的事情：根据单击按钮的状态，增加
左侧
的宽度和减小
右侧
的宽度，反之亦然。您提到的唯一警告是以像素为单位添加高度和宽度。检查一下这个plunker，在这里我使用了
window.innerWidth
和
window.innerHeight
来获得视口测量值：可以只指定宽度中的固定元素值，第二个块用100%填充其余部分吗？是的，我对代码进行了编辑，并做了一些lil解释。除息的