Html 在不影响边栏的情况下创建固定内容区域

我想使内容区域最小宽度固定。我有两个侧边栏和内容区。一个侧边栏可以通过按钮隐藏。另一个侧边栏应该始终可见。当第一个侧边栏被隐藏时，内容区域应该扩展。但除非它的隐藏内容对于给定的静态大小是固定的。当前，当我给出内容最小宽度静态值时，右侧边栏在低分辨率下消失。忽略侧边栏隐藏部分。我想避免第二个边栏溢出的内容在低分辨率的问题

编辑-查看此问题：


这是不一样的，但它可能是相似的，足以帮助。如果你有时间，但你还不知道jQuery，你应该研究一下它，一旦你从一开始就学会了，它实际上会让很多事情变得更容易


我认为如果您使用jQuery来更改内容区域的CSS，这可能是最好的。您链接的JSFIDLE并没有按照您所描述的方式工作，因此我无法给出确切的代码供您使用，但它可能看起来像这样

$("#sidebar-sec").click(function(){
    $("content_area").css("width", "width goes here");
});

这样做可能比只使用CSS更容易，尤其是当您遇到问题时。如果您添加了如下内容，您还可以首先使用它隐藏侧边栏：

$("#sidebar-sec").hide();

在这里，我更改了div的顺序，并使用了
table
layout


正文{
位置：相对位置；
身高：100%；
最小高度：100%；
边际：0px；
填充：0px；
}
html{
身高：100%；
最小高度：100%；
边际：0px；
填充：0px；
}
#主容器{
身高：100%；
最小高度：100%；
背景色：红色；
显示：表格；
}
旁白{
显示：表格单元格；
身高：100%；
位置：相对位置；
}
#侧边栏主{
宽度：240px；
最小宽度：240px；
背景颜色：蓝色；
}
#边栏秒{
宽度：400px；
最小宽度：400px；
}
#主要{
位置：相对位置；
身高：100%；
背景颜色：黄色；
最小宽度：709px；
显示：表格单元格；
}

Lorem ipsum dolor sit amet，奉献精英。圣帕里亚图尔·埃利根迪·塞普·乌拉姆教堂透视图，尼莫·康莫迪！Expedita，别名nihil tempore。全方位，eum减去发炎性软组织。
Lorem ipsum dolor sit amet，奉献精英。圣帕里亚图尔·埃利根迪·塞普·乌拉姆教堂透视图，尼莫·康莫迪！Expedita，别名nihil tempore。全方位，eum减去发炎性软组织。
Lorem ipsum dolor sit amet，奉献精英。圣帕里亚图尔·埃利根迪·塞普·乌拉姆教堂透视图，尼莫·康莫迪！Expedita，别名nihil tempore。全方位，eum减去发炎性软组织。
我正在寻找一种css方式。但是谢谢。在JSFIDLE中，它隐藏了第二个侧栏，内容是全宽的。这就是我想要避免的我发现了一些可能会有帮助的东西我只是想把它编辑到我的答案中。这是预期的效果。就我所知，你能告诉我有没有一种不使用表格和表格单元格的方法来实现这一点？CSS的一个问题是，
#主容器
所需的总宽度是
宽度：1349px
。非
宽度：100%
。因此，只需将1350px的宽度或最小宽度添加到
#主容器
，即可解决此问题检查更新的小提琴-
$("#sidebar-sec").hide();