当侧边栏收缩时内容宽度增加，打开时内容宽度减少用css怎么写

发布网友发布时间：2022-04-25 14:11

我来回答

共3个回答

热心网友时间：2023-10-08 17:22

橘色部分使用绝对定位，比如侧边栏宽度为200px,橘色部分的绝对定位就写left:200px;right:0;

收缩后减少left的值，比如left：20px;

追问收缩后的橘色这块儿代码怎么写

追答我回答的第二部，用js改变橘色块的left值

热心网友时间：2023-10-08 17:22

你好，
可以将橘色部分的宽度设置成计算得到的数值。
width:calc(总宽 - 侧边栏宽度);

热心网友时间：2023-10-08 17:23

默认展开的css：

#left {
    width: 260px;
    bottom: 0;
    top: 0;
    background-color: #e6effb;
    border-left: 1px solid #c0d7f5;
    border-right: 1px solid #c0d7f5;
    position: absolute;
    left: 0;
}
#right {
    margin-left: 260px;
    overflow: hidden;
    padding: 20px;
}

缩起来，都加个class：

#left.sit {
width: 50px;
}
#right.sit {
margin-left: 50px;
}

全部栏目

当侧边栏收缩时内容宽度增加，打开时内容宽度减少用css怎么写